<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
overflow: hidden;
width: 550px;
margin: 0 auto;
}
.container .left {
float: left;
margin: 0 30px;
}
.container select {
width: 100%;
height: 200px;
}
.container .mid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h3>宋江涛的现任女友</h3>
<select id="sel1" multiple>
<option value="1">幂幂</option>
<option value="2">花花</option>
<option value="3">春春</option>
<option value="4">盈盈</option>
<option value="5">红红</option>
</select>
</div>
<div class="left mid">
<p>
<button id="btnToRight" title="右移动选中的">>></button>
</p>
<p>
<button id="btnToRightAll" title="右移动全部">>>|</button>
</p>
<p>
<button id="btnToLeft" title="左移动选中的"><<</button>
</p>
<p>
<button id="btnToLeftAll" title="左移动全部">|<<</button>
</p>
</div>
<div class="left">
<h3>宋江涛的前女友</h3>
<select id="sel2" multiple>
<option value="6">坤坤</option>
</select>
</div>
</div>
<script>
var sel1 = document.getElementById("sel1")
var sel2 = document.getElementById("sel2")
document.getElementById("btnToRight").onclick = function() {
var option = document.querySelectorAll("#sel1>option")
for (var i = 0; i < option.length; i++) {
if (option[i].selected == true) {
var o = document.createElement("option")
o.innerHTML = option[i].innerText
sel2.appendChild(o)
option[i].remove()
}
}
}
document.getElementById("btnToRightAll").onclick = function() {
var option = document.querySelectorAll("#sel1>option")
for (var i = 0; i < option.length; i++) {
var o = document.createElement("option")
o.innerHTML = option[i].innerText
sel2.appendChild(o)
option[i].remove()
}
}
document.getElementById("btnToLeft").onclick = function() {
var option = document.querySelectorAll("#sel2>option")
for (var i = 0; i < option.length; i++) {
if (option[i].selected == true) {
var o = document.createElement("option")
o.innerHTML = option[i].innerText
sel1.appendChild(o)
option[i].remove()
}
}
}
document.getElementById("btnToLeftAll").onclick = function() {
var option = document.querySelectorAll("#sel2>option")
for (var i = 0; i < option.length; i++) {
var o = document.createElement("option")
o.innerHTML = option[i].innerText
sel1.appendChild(o)
option[i].remove()
}
}
</script>
</body>
</html>
文本穿梭框
最新推荐文章于 2024-07-12 14:38:32 发布