<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
select {
70px;
height: 120px;
}
button {
display: block;
}
div {
vertical-align: top;
display: inline-block;
}
</style>
</head>
<body>
<select id="left" size="10">
<option value="">张飞</option>
<option value="">黄忠</option>
<option value="">关羽</option>
<option value="">赵云</option>
<option value="">马超</option>
</select>
<div>
<button onclick="singleToRight()">></button>
<button onclick="allToRight()">>></button>
<button onclick="singleToLeft()"><</button>
<button onclick="allToLeft()"><<</button>
</div>
<select id="right" size="10"></select>
<script>
var leftEle = document.getElementById("left");
var rightEle = document.getElementById("right");
function singleToRight() {
var index = leftEle.selectedIndex;//获取被选中的option的位置
var chosenOption = leftEle.options[index];//获取该option
rightEle.appendChild(chosenOption);//把该option添加到右边select
}
function allToRight() {
while (leftEle.options.length != 0) {
rightEle.appendChild(leftEle.options[0]);
}
}
function singleToLeft() {
var index = rightEle.selectedIndex;//获取被选中的option的位置
var chosenOption = rightEle.options[index];//获取该option
leftEle.appendChild(chosenOption);//把该option添加到左边select
}
function allToLeft() {
while (rightEle.options.length != 0) {
leftEle.appendChild(rightEle.options[0]);
}
}
</script>
</body>
</html>