1.图片效果
1.html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>罗静Day59</title> <style> select {
height:200px;
width:100px;
}
p {
display:inline-block;
}
</style>
</head>
<body>
<select multiple id="left">
<option>项目一</option>
<option>项目二</option>
<option>项目三</option>
<option>项目四</option>
<option>项目五</option></select><p>
<button id="toRight">>></button> <br>
<button id="toLeft"><<</button>
</p>
<select multiple id="right">
<option>item一</option>
<option>item二</option>
<option>item三</option>
<option>item四</option>
<option>item五</option>
</select>
</body>
<script>
var left =document.getElementById("left");
var right =document.getElementById("right");
var toRight =document.getElementById("toRight");
var toLeft =document.getElementById("toLeft");
//option -->select
//toright添加点击事件，把左边的option移到右边
toRight.onclick =function () {
var opts =left.options;
for (var i =0;i
var option =opts[i];
if (option.selected){
right.append(option);
i--;
}
}
}
toLeft.onclick =function () {
var opts =right.options;
for (i =0;i
var option =opts[i]
if (option.selected){
left.append(option);
i--;
}
}
}
</script>
</html>
