首页 > 代码库 > 下拉列表左右选择案例

下拉列表左右选择案例

2024-10-27 02:28:39   208人阅读

     单个添加的操作
1、得到select里面的option
      -getElementsByTagName（）返回是数组
       -遍历数组，得到每一个option
2、判断option是否被选中
        -属性：selected 如果选中 selected=true 没有选中就是false
3、如果选中，把选中的添加
         -得到select
          -添加到选择的部分 appendChild方法
  全部选中添加的操作
  1、获取第一个select下面的option对象
  2、返回数组，遍历数组
  3、得到每一个option对象
  4、得到select
  5、添加到select2下面 appendChild方法、

代码

<html>
 <head>
  <title>Html示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>

<div  style="float:left">   //把第一个下拉列表弄在左边  <style> 标签用于为 HTML 文档定义样式信息。

<div>
<select id="select1" multiple ="multiple" style="width:100px; height:100px">   //multiple 允许在下拉列表中进行多选
<option> AAAAAA</option>
<option> BBBBBB</option>
<option> CCCCCC</option>
<option> DDDDDD</option>
</select>
</div>

<div>
<input type="button" value="http://www.mamicode.com/选中添加到右边" onclick="selectright()"/> <br/>
<input type="button" value="http://www.mamicode.com/全部添加到右边" onclick="allright()"/>
</div>

</div>

<div id ="right" >

<div>
<select id="select2" multiple ="multiple" style="width:100px;height:100px">
<option> QQQQQQ</option>
<option> KKKKKK</option>
</select>
</div>

<div>
<input type="button" value="http://www.mamicode.com/选中添加到左边" onclick="selectleft()"/><br/>
<input type="button" value="http://www.mamicode.com/全部添加到左边" onclick="allleft()"/>
</div>

</div>

<script type ="text/javascript">

 
 //选中添加到右边的操作
     function selectright() {
 var select1 =document.getElementById("select1");
 var select2=document.getElementById("select2");
 var options1=select1.getElementsByTagName("option");
 for(var i=0;i<options1.length;i++) {
 var option1=options1[i];
 if(option1.selected==true) {
	 select2.appendChild(option1);
	 i--;  //因为是数组，每次循环数组长度为减1，但是i的长度也会变，最后会出现只能移动几个的现象，而不能全部移动完
 }
 }
 }
//全部添加到右边的操作
function allright() {
 var select1 =document.getElementById("select1");
 var select2=document.getElementById("select2");
 var options1=select1.getElementsByTagName("option");
  for(var i=0;i<options1.length;i++) {
 var option1=options1[i];
  select2.appendChild(option1);
  i--;
}
}
//选中添加到左边的操作
function selectleft() {
 var select2 =document.getElementById("select2");
 var select1=document.getElementById("select1");
 var options2 =select2.getElementsByTagName("option");
 for(var i=0;i<options2.length;i++) {
  var option2 =options2[i];
  if(option2.selected==true) {
      select1.appendChild(option2);
	  i--;
  }
 }
}
//全部添加到左边的操作
function allleft() {
var select2= document.getElementById("select2");
var select1= document.getElementById("select1");
var options2= select2.getElementsByTagName("option");
for (var i=0;i<options2.length;i++) {
   var option2 =options2[i];
   select1.appendChild(option2);
   i--;
}
}
</script>

 </body>
</html>

　　  结果显示技术分享

下拉列表左右选择案例


联系
我们