下拉列表的左右选择

<!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="选中添加到右边" onclick="selToRight();"/><br>
<input type="button" value="全部添加到右边" onclick="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="选中添加到左边" onclick="selToLeft();"/><br>
<input type="button" value="全部添加到左边" onclick="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>
阅读更多

扫码向博主提问

COURAGE0316

非学,无以致疑;非问,无以广识
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页