DOM练习3-选项批量移动

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

 

posted @ 2013-05-04 20:24  hacket520  阅读(302)  评论(0)  编辑  收藏  举报