下拉列表左右选择案例

最新推荐文章于 2022-07-21 15:31:28 发布

weixin_33805992

最新推荐文章于 2022-07-21 15:31:28 发布

阅读量163

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zengjiao/p/7183882.html

版权

单个添加的操作
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="选中添加到右边" οnclick="selectright()"/> <br/>
<input type="button" value="全部添加到右边" οnclick="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="选中添加到左边" οnclick="selectleft()"/><br/>
<input type="button" value="全部添加到左边" οnclick="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>

　　结果显示

转载于:https://www.cnblogs.com/zengjiao/p/7183882.html

weixin_33805992

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
下拉列表左右选择案例

单个添加的操作1、得到select里面的option -getElementsByTagName（）返回是数组 -遍历数组，得到每一个option 2、判断option是否被选中 -属性：selected 如果选中 selected=true 没有选中就是false3、如果选中，把选中的添加 -得到select ...
复制链接

扫一扫