DOM练习3-选项批量移动
2014-10-30 16:19
288 查看
![](http://images.cnitblog.com/blog/502698/201305/04202848-88dccfdf28d64610b1804915c1c1d85f.jpg)
1、html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>optionMove.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="js/optionRomove.js"></script> 7 </head> 8 9 <body> 10 <div> 11 <select style="width:60px" multiple size="10" id="leftID"> 12 <option>选项A</option> 13 <option>选项B</option> 14 <option>选项C</option> 15 <option>选项D</option> 16 <option>选项E</option> 17 <option>选项F</option> 18 <option>选项G</option> 19 <option>选项H</option> 20 <option>选项I</option> 21 <option>选项J</option> 22 </select> 23 </div> 24 <div style="position:absolute;left:220px;top:20px"> 25 <select multiple size="10" style="width:60px" id="rightID"> 26 </select> 27 </div> 28 29 <div style="position:absolute;left:100px;top:40px"> 30 <input type="button" value="批量右移" id="rightMoveID"/> 31 </div> 32 <div style="position:absolute;left:100px;top:70px"> 33 <input type="button" value="全部右移" id="rightMoveAllID"/> 34 </div> 35 <div style="position:absolute;left:100px;top:100px"> 36 <input type="button" value="批量左移" id="leftMoveID"/> 37 </div> 38 <div style="position:absolute;left:100px;top:130px"> 39 <input type="button" value="全部左移" id="leftMoveAllID"/> 40 </div> 41 <div style="position:absolute;left:100px;top:160px"> 42 <input type="button" value="左边颠例" id="leftReverseAllID"/> 43 </div> 44 </body> 45 </html>
2、JS
// 1、双击右移 document.getElementById("leftID").ondblclick = function(){ // 获取选中的对象 var optionElement = this[this.selectedIndex];//被选中的位置,this代表select标签,this.selectedIndex代表选中的索引号,0开始 // 将该对象移动到右边 document.getElementById("rightID").appendChild(optionElement); }; // 2、双击左移 document.getElementById("rightID").ondblclick = function(){ // 获取选中的对象 var optionElement = this[this.selectedIndex]; // 将对象移动到左边 document.getElementById("leftID").appendChild(optionElement); }; // 3、批量右移 document.getElementById("rightMoveID").onclick = function(){ var selectElement = document.getElementById("leftID");//定位左边select对象 var optionSelectArray = selectElement.options;//取得option对象组成的集合 var size = optionSelectArray.length; for (var i=0 ; i<size ; i++) { //如果这里的size写成optionSelectArray.length,选中10个,只有5个会右移过去, var optionElement = selectElement[selectElement.selectedIndex];//获取到选中的option对象 document.getElementById("rightID").appendChild(optionElement); /* 一写就会使CPU使用率无限上升 if(selectElement[i].selected == true) document.getElementById("rightID").appendChild(selectElement[i]); i--; */ }; }; // 4、批量左移 document.getElementById("leftMoveID").onclick = function(){ var rightSelectElement = document.getElementById("rightID");//右边的select对象 var rightOptionArray = rightSelectElement.options;//右边的option对象 var size = rightOptionArray.length; for (var i=0; i<size; i++) { var optionSelectedElement = rightSelectElement[rightSelectElement.selectedIndex]; document.getElementById("leftID").appendChild(optionSelectedElement); }; }; // 5、全部右移 document.getElementById("rightMoveAllID").onclick = function(){ var leftSelectElement = document.getElementById("leftID"); var leftOptionArray = leftSelectElement.options; var size = leftOptionArray.length; for (var i=0; i<size; i++) { document.getElementById("rightID").appendChild(leftOptionArray[0]); }; }; // 6、全部左移 document.getElementById("leftMoveAllID").onclick = function(){ var rightSelectElement = document.getElementById("rightID"); var rightOptionArray = rightSelectElement.options; var size = rightOptionArray.length; for (var i=0; i<size; i++) { document.getElementById("leftID").appendChild(rightOptionArray[0]);//这里写成i,firefox和chrome都没问题,但ie只能移动一半 }; }; // 7、左边颠倒 /*document.getElementById("leftReverseAllID").onclick = function(){ alert("左边颠倒"); var leftSelectElement = document.getElementById("leftID"); var leftOptionArray = leftSelectElement.options; var size = leftOptionArray.length; for(var i=0;i<size;i++){ // var temp = leftOptionArray[i]; leftOptionArray[i] = leftOptionArrays[size-i-1]; // leftOptionArrays[size-i-1] = temp; } }*/
相关文章推荐
- DOM练习3-选项批量移动
- jquery学习之1.17-小练习2-左右选项框内容移动
- HTMO DOM部分---小练习;列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。
- DOM的小练习,两个表格之间数据的移动
- Python学习练习:批量移动文件
- DOM操作和jQuery实现选项移动操作的简单实例
- 全面解析DOM操作和jQuery实现选项移动操作代码分享
- js+dom获得单选选项
- BIT网教c语言练习_编程复习4链表移动
- plsql 练习五 批量查询指定方案的建表语句
- 点批量移动到线上
- 用jquery实现选项内容的左右移动
- javascript基础(Dom查询练习)(二十七)
- Python代码练习--批量下载
- Javascript_15_DOM_select练习
- 动态规划练习——移动路线
- 五个你必须知道的javascript和web debug技术 2013年11月20日 在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点
- JavaScript强化教程——DOM编程(两种控制div移动的方法)
- XML小练习:利用DOM解析XML(利用递归,实用性强)