40、（案例）下拉列表，左右选择
程序员文章站
2022-06-13 12:51:33
...
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="div1" style="float:left">
<div>
<select id="select1" multiple="multiple" style="width:120px;height:200px;">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
<option>DDDDD</option>
<option>EEEEE</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右边" onclick="allToRight();"/>
</div>
</div>
<div id="div2"">
<div>
<select id="select2" multiple="multiple" style="width:120px;height:200px;">
<option>QQQQQ</option>
<option>WWWWW</option>
<option>EEEEE</option>
<option>RRRRR</option>
<option>TTTTT</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/>
</div>
</div>
</body>
<script type="text/javascript">
//1、实现选中添加到右边
function selToRight(){
var select2 = document.getElementById("select2");
//获取select1下的option
var select1 = document.getElementById("select1");
var options1 = select1.getElementsByTagName("option");
//遍历option数组
for(var i=0;i<options1.length;i++){
var option1 = options1[i];//每一个option对象
//判断option是否被选中
if(option1.selected){
//添加到select2中
select2.appendChild(option1);
i--;//每次添加之后要让i减1
}
}
}
//2、全部添加到右边
function allToRight(){
var select2 = document.getElementById("select2");
//得到select下面的option对象
var select1 = document.getElementById("select1");
var options1 = select1.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options1.length;i++){
var option1 = options1[i];//每一个option对象
select2.appendChild(option1);
i--;
}
}
//3、选中添加到左边
function selToLeft(){
var select1 = document.getElementById("select1");
//获取select2里面的option对象
var select2 = document.getElementById("select2");
var options2 = select2.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options2.length;i++){
var option2 = options2[i];//每一个option对象
if(option2.selected){
select1.appendChild(option2);
i--;
}
}
}
//4、全部添加到左边
function allToLeft(){
//获取select2里面的option
var select2 = document.getElementById("select2");
var options2 = select2.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options2.length;i++){
var option2 = options2[i];//每一个option对象
select1.appendChild(option2);
i--;
}
}
</script>
</html>
上一篇： 三层架构定义及代码（一）
下一篇： 设计模式之策略模式