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="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="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; } }*/