下拉列表的左右选择

最新推荐文章于 2021-01-16 21:55:02 发布

COURAGE0316

最新推荐文章于 2021-01-16 21:55:02 发布

阅读量388

点赞数

分类专栏： js 文章标签：下拉列表的左右选择

本文链接：https://blog.csdn.net/COURAGE0316/article/details/80321968

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右选择</title>
</head>
<body>
<div id="s1" style="float: left;">
<div>
<select id="select1" multiple="multiple" style="height: 100px;width: 100px;">
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
<option>DDDD</option>
<option>EEEEE</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边" οnclick="selToRight();"/><br>
<input type="button" value="全部添加到右边" οnclick="allToRight();"/>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple" style="height: 100px;width: 100px;">
<option>XXXX</option>
<option>YYYY</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边" οnclick="selToLeft();"/><br>
<input type="button" value="全部添加到左边" οnclick="allToLeft();"/>
</div>
</div>
</body>
<script type="text/javascript">
//实现全部添加到右边
function allToRight(){
/*1.获取第一个select下面的option对象
2.返回数组遍历数组
3.得到每一个option对象
4.得到select2
5.添加到select2下面
appendChild()方法*/
//得到select2
var s2=document.getElementById("select2");
//得到select下面的option对象
var s1=document.getElementById("select1");
var ops=s1.getElementsByTagName("option");//返回的是数组
//遍历数组
for(var j=0;j<ops.length;j++){
//得到每一个option对象
var op1=ops[j];
//添加option到s2下面
s2.appendChild(op1);
j--;
}
}
//实现选中添加到右边
function selToRight(){
/*1.获取select1里面的option
-getElementsByTagName()返回数组，然后遍历
2.判断option是否被选中
-属性 selected,判断是否被选中
selected==true 选中
selected==false 没有被选中
3.如果是选中，把选择的添加到右边
4.得到select2
5.添加选择的部分
-appendChild()方法*/
//得到select2
var select2=document.getElementById("select2");
//获取select1里面的option
//得到select1
var select1=document.getElementById("select1");
//得到option
var options1=select1.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options1.length;i++){
var option1=options1[i];//得到每一个option对象
if(option1.selected==true){
//添加到select2里面
select2.appendChild(option1);
i--;
}
}
}

//实现选中添加到左边
function selToLeft(){
var select3=document.getElementById("select1");

var select4=document.getElementById("select2");
var options2=select4.getElementsByTagName("option");
//遍历数组
for(var i=0;i<options2.length;i++){
var option1=options2[i];//得到每一个option对象
if(option1.selected==true){
select3.appendChild(option1);
i--;
}
}
}

//实现全部添加到左边
function allToLeft(){
var s1=document.getElementById("select1");

var s2=document.getElementById("select2");

var ops=s2.getElementsByTagName("option");//返回的是数组
//遍历数组
for(var j=0;j<ops.length;j++){
//得到每一个option对象
var op1=ops[j];
s1.appendChild(op1);
j--;
}
}
</script>
</html>