下拉选择框
有两个下拉选择框；设置属性为multiple属性
四个按钮，有事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="s1" style="float:left;">
<select id="select1" multiple="multiple" style="width: 100px;height: 100px;">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
<option>DDDDD</option>
<option>EEEEE</option>
<option>FFFFF</option>
</select>
<br/>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="selAllToRight();"/><br/>
</div>
<div id="s2">
<select id="select2" multiple="multiple" style="width: 100px;height: 100px;">
<option>aaaaaa</option>
</select>
<br/>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="selAllToLeft();"/><br/>
</div>
<script type="text/javascript">
function selToRight() {
var select2 = document.getElementById("select2");
var select1 = document.getElementById("select1");
var options1 = select1.getElementsByTagName("option");
// var a= options1.length;
for (var i = 0; i < options1.length; i++) {
var option1 = options1[i];
if (option1.selected == true)
select2.appendChild(option1);
i--;
}
}
function selAllToRight() {
var select2 = document.getElementById("select2");
var select1 = document.getElementById("select1");
var options1 = select.getElementsByTagName("option");
for (i = 0; i < options1.length; i++) {
var option1 = options1[i];
select2.appendChild(option1);
i--;
}
}
</script>
</body>
</html>
1.获取select1里面的option
2.判断是否被选中
属性selected，判断是否被选中
3.如果是选中，把选择的添加到右边去
4.得到select2
5.添加选择的部分
appendChild方法
网友评论