学习笔记——下拉列表左右选择
2016-03-21 16:50
330 查看
话不多说,先上
图
再来代码:
1.我在学习的过程中,感觉需要注意的是appendChild()方法的使用
提示:如果您需要创建包含文本的新段落,请记得添加到段落的文本的文本节点,然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
这里用的是appendchild()方法从一个元素向另一个元素中移动元素
2.然后是和checkbox中同样的是selected的值作为判定结果;
3.在移动过程中,options的长度都在变化,所以此时应该把i 的值作为不变元素,然后通过length向i移动进行循环
继续学习......
图
再来代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <style type="text/css"> div#s1{ float:left; } </style> <body> <div id="s1"> <div> <select multiple="multiple" id="select1" style="width:100px;height:200px"> <option>asda</option> <option>asda</option> <option>asda</option> <option>asda</option> </select> </div> <div> <input type="button" value="部分选择到右面" onclick="test1()"><br> <input type="button" value="全部选择到右面" onclick="test2()"> </div> </div> <div id="s4"> <div> <select multiple="multiple" id="select2" style="width:100px;height:200px"> <option>asda</option> </select> </div> <div> <input type="button" value="部分选择到左面" onclick="test3()"><br> <input type="button" value="全部选择到左面" onclick="test4()"> </div> </div> <br> <script type="text/javascript"> function test1(){ var selectaa=document.getElementById("select1"); var selectbb=document.getElementById("select2"); var options=selectaa.getElementsByTagName("option");//注意,//经常忘记带s,getElementsByTagName for(var i=0;i<options.length;i++){ var option1=options[i]; if(option1.selected==true){ selectbb.appendChild(options[i]); i--;//注意在每次循环结束都会是length的长度-1,如果不一直把i的值设为0;就会减少了循环的次数,错误的我已经试过了 } } } function test2() { var selectaa=document.getElementById("select1"); var selectbb=document.getElementById("select2"); var options=selectaa.getElementsByTagName("option");//注意,经常忘记带s,getElementsByTagName for(var i=0;i<options.length;i++) { selectbb.appendChild(options[i]); i--; } } function test3(){ var selectaa=document.getElementById("select1"); var selectbb=document.getElementById("select2"); var options=selectbb.getElementsByTagName("option");//注意,//经常忘记带s,getElementsByTagName for(var i=0;i<options.length;i++){ var option1=options[i]; if(option1.selected==true){ selectaa.appendChild(options[i]); i--;//注意在每次循环结束都会是length的长度-1,如果不一直把i的值设为0;就会减少了循环的次数,错误的我已经试过了 } } } function test4() { var selectaa=document.getElementById("select1"); var selectbb=document.getElementById("select2"); var options=selectbb.getElementsByTagName("option");//注意,经常忘记带s,getElementsByTagName for(var i=0;i<options.length;i++) { selectaa.appendChild(options[i]); i--; } } </script> </body> </html>
1.我在学习的过程中,感觉需要注意的是appendChild()方法的使用
定义和用法
appendChild() 方法向节点添加最后一个子节点。提示:如果您需要创建包含文本的新段落,请记得添加到段落的文本的文本节点,然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
这里用的是appendchild()方法从一个元素向另一个元素中移动元素
2.然后是和checkbox中同样的是selected的值作为判定结果;
3.在移动过程中,options的长度都在变化,所以此时应该把i 的值作为不变元素,然后通过length向i移动进行循环
继续学习......
相关文章推荐
- 大型网站系统架构的演化
- UVA 11988——Broken Keyboard (a.k.a. Beiju Text)
- HOG特征
- Chrome之保护视力色
- linux 常用命令
- event.keyCode用法详解
- 数据挖掘十大经典算法(八) kNN: k-nearest neighbor classification
- java中Character和char的区别
- 夺命雷公狗---DEDECMS----18dedecms之无可奈何标签-sql标签取出今天更新
- 数组的相关问题
- 六款值得推荐的android(安卓)开源框架简介
- Html+CSS CSS3 Keyframe+Animation属性 CSS动画
- JAVA环境配置
- 数据结构之单链表操作
- 安卓属性动画(Property Animation)(下)
- vagrant
- hdu hdoj 1598 find the most comfortable road【最小生成树】
- PAT 乙级 1016.部分A+B
- [LeetCode][数论]Roman to Integer
- Java常用类