学习笔记——下拉列表左右选择
话不多说,先上图
再来代码:
<!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="部分选择到右面" οnclick="test1()"><br> <input type="button" value="全部选择到右面" οnclick="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="部分选择到左面" οnclick="test3()"><br> <input type="button" value="全部选择到左面" οnclick="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移动进行循环
继续学习......