js实现-下拉列表左右选择
2016-10-29 09:46
736 查看
下拉列表左右选择
* 下拉选择框
<select>
<option>111</option>
<option>111</option>
</select>
* 创建一个页面
** 两个下拉选择框
- 设置属性 multiple属性
** 四个按钮,有事件
* 选中添加到右边
步骤
/*
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组,得到每一个option
2、判断option是否被选中
- 属性 selected,判断是否被选中
** selected= true: 选中
** selected= false:没有选择
3、如果是选中,把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
*/
* 全部添加到右边
步骤
/*
1、获取第一个select下面的option对象
2、返回数组,遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
* 选中添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组,遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件 属性 selected == true:选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
*/
* 全部添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组,遍历数组
3、得到每一个option对象
4、获取到select1
5、添加到select1里面
- 使用appendChild方法
*/
* 下拉选择框
<select>
<option>111</option>
<option>111</option>
</select>
* 创建一个页面
** 两个下拉选择框
- 设置属性 multiple属性
** 四个按钮,有事件
* 选中添加到右边
步骤
/*
1、获取select1里面的option
- getElementsByTagName()返回是数组
- 遍历数组,得到每一个option
2、判断option是否被选中
- 属性 selected,判断是否被选中
** selected= true: 选中
** selected= false:没有选择
3、如果是选中,把选择的添加到右边去
4、得到select2
4、添加选择的部分
- appendChild方法
*/
* 全部添加到右边
步骤
/*
1、获取第一个select下面的option对象
2、返回数组,遍历数组
3、得到每一个option对象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
* 选中添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组,遍历数组
3、得到每一个option对象
4、判断option是否被选中
- if条件 属性 selected == true:选择
5、获取select1
6、添加到select1里面
- 使用appendChild方法
*/
* 全部添加到左边
步骤
/*
1、获取select2里面的option对象
2、返回是数组,遍历数组
3、得到每一个option对象
4、获取到select1
5、添加到select1里面
- 使用appendChild方法
*/
<body> <div id="s1" style="float:left;"> <div> <select id="select1" multiple="multiple" style="width:100px;height:100px;"> <option>AAAAAAAA</option> <option>BBBBBBBB</option> <option>CCCCCCCC</option> <option>DDDDDDDD</option> <option>EEEEEEEE</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="width:100px;height:100px;"> <option>QQQQQQQQ</option> </select> </div> <div> <input type="button" value="选中添加到左边" onclick="selToLeft();"/><br/> <input type="button" value="全部添加到左边" onclick="allToLeft();"/> </div> </div> <script type="text/javascript"> //实现全部添加到左边 function allToLeft() { /* 1、获取select2里面的option对象 2、返回是数组,遍历数组 3、得到每一个option对象 4、获取到select1 5、添加到select1里面 - 使用appendChild方法 */ //获取select2 var select2 = document.getElementById("select2"); //获取select1 var select1 = document.getElementById("select1"); //获取select2里面的option var options1 = select2.getElementsByTagName("option"); //遍历数组 for(var m=0;m<options1.length;m++){ //得到每一个option var op11 = options1[m]; //添加到select1里面 select1.appendChild(op11); m--; } } //选择添加到左边 function selToLeft() { /* 1、获取select2里面的option对象 2、返回是数组,遍历数组 3、得到每一个option对象 4、判断option是否被选中 - if条件 属性 selected == true:选择 5、获取select1 6、添加到select1里面 - 使用appendChild方法 */ //获取select1 var s1 = document.getElementById("select1"); //获取到select2 var s2 = document.getElementById("select2"); //得到s1里面的option对象 var opss = s2.getElementsByTagName("option"); //遍历数组 for(var aa=0;aa<opss.length;aa++) { //得到每一个option var op = opss[aa]; //判断是否被选中 if(op.selected == true) { //被选中 //添加到select1里面 s1.appendChild(op); aa--; } } } //全部添加到右边 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()返回是数组 - 遍历数组,得到每一个option 2、判断option是否被选中 - 属性 selected,判断是否被选中 ** selected= true: 选中 ** selected= false:没有选择 3、如果是选中,把选择的添加到右边去 4、得到select2 4、添加选择的部分 - appendChild方法 */ //获取select1里面的option //获取select2 var select2 = document.getElementById("select2"); //得到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--; } } } </script> </body>
相关文章推荐
- Jq和JS实现下拉列表左右选择(时间)
- 下拉列表的左右选择的实现
- Jquery实现下拉列表左右选择
- 表格中用js左右添加从下拉列表中选择的内容
- JavaScript(JS)实现省市联动选择下拉列表
- 如何使用js完成下拉列表左右选择
- 下拉列表左右选择(js代码)
- JS实现生日选择下拉列表
- js-案例:下拉列表左右选择分析
- js案例之全选与下拉列表左右选择
- 利用JS+Ajax实现下拉列表无刷联动,及其相关
- JS+CSS和图片美化下拉列表选择框(select)
- JavaScript js 左右移动下拉列表选项
- 用js+jsp实现在同一个下拉列表中,动态生成多级select选项
- js实现左右列表内容交换传递
- 关于在GridView模版里添加DropDownList实现根据下拉列表的不同选择gridview根据条件筛选显示。
- javascript实现通过拼音首字母快速选择下拉列表
- 使用dwr实现下拉框级联和js实现动态选择option的selected状态方法总结
- js+div实现的下拉列表
- 下拉列表,选择项的实现方式: