JavaScript drop-down box select the option to move operations

operation result:
Source:
  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>选项移动</title>
  6 </head>
  7 <body>
  8 <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing= "0" 
  . 9         style = "margin: 15px 0px 0px 15px;" > 
10      < TR > 
. 11          < TD width = "126" > 
12 is              ! <- Multiple = "Multiple" simultaneously select a plurality of size = "10" determining a length selected from the pull-down -> 
13 is              < SELECT name = "First" Multiple = "Multiple" size = 10 class = "TD3" ID = "S" > 
14                  < option value = "option 1" > option 1 </option>
 15                 <option value = "Option 2" > Option 2 </ Option > 
16                  < Option value = "Option 3" > Option 3 </ Option > 
. 17                  < Option value = "Option 4" > Option 4 </ Option > 
18 is                  < Option value = "option 5" > option 5 </ option > 
. 19                  < option value = "option 6" > option 6 </ option > 
20 is                  <option value="选项7">选项7</option>
 21                 <option value="选项8">选项8</option>
 22             </select>
 23         </td>
 24         <td width="69" valign="middle">
 25             <input name="add" id="add" type="button" class="button" value="-->"/>
 26             <input name="add_all" id="add_all" type="button" class="button" value="==>"/>
 27             <input name="remove" id="remove" type="button" class="button" value="&lt;--"/>
 28             <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;=="/>
 29         </td>
 30         <td width="127" align="left">
 31             <select name="second" size="10" multiple="multiple" class="td3" id="second">
 32                 <option value="选项9">选项9</option>
 33             </select>
 34         </td>
 35     </tr>
 36 </table>
 37 <script type="text/javascript">
 38     // 左右两边的select
 39     var leftSelect = document.getElementById("s");
 40     var leftItems = leftSelect.children;
 41     var rightSelect = document.getElementById("second");
 42     var rightItems = rightSelect.children;
 43     var selectedItems = [];
 44 
 45     // 4个 按钮
 46     // 01 -> left2right selected
 47     document.getElementById("add").onclick = function () {
 48         // todo
 49         selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
 50         for (var i = 0; i < leftItems.length; i++) {
 51             var item = leftItems[i];
 52             if (item.selected) {
 53                 selectedItems.push(item);
 54             }
 55         }
 56 is          for ( var J =  0 ; J < selectedItems.length; J ++ ) {
 57 is              rightSelect.appendChild (the selectedItems [J]);
 58  //             leftSelect.removeChild (the selectedItems [J]); TODO -> left Why no need to remove it? 
59          }
 60      };
 61 is      // 02 -> All left2right 
62 is      document.getElementById ( " add_all " ) .onclick =  function () {
 63 is          // TODO 
64         selectedItems.splice ( 0 , selectedItems.length); // delete all its elements 
65  //         Alert (selectedItems.concat (selectedItems, leftItems) .length); // TODO - after> Why add length just 1? 
66          for ( var I =  0 ; I < leftItems.length; I ++ ) {
 67              var Item = leftItems [I];
 68              selectedItems.push (Item);
 69          }
 70          for ( var J =  0 ; J < the selectedItems. length; J ++) {
 71             rightSelect.appendChild(selectedItems[j]);
 72         }
 73     };
 74     // 03 -> right2left  selected
 75     document.getElementById("remove").onclick = function () {
 76         // todo
 77 
 78         selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
 79         for (var j = 0; j < rightItems.length; j++) {
 80             var item = rightItems[j];
 81             if (item.selected) {
 82                 selectedItems.push(item);
 83             }
 84         }
 85 
 86         for (var i = 0; i < selectedItems.length; i++) {
 87             leftSelect.appendChild(selectedItems[i]);
 88         }
 89     };
 90     // 04 -> right2left  all
 91     document.getElementById("remove_all" ) .Onclick =  function () {
 92          // TODO 
93          selectedItems.splice ( 0 , selectedItems.length); // delete all its elements 
94          for ( var J =  0 ; J < rightItems.length; J ++ ) {
 95              var Item = rightItems [J];
 96              selectedItems.push (Item);
 97          }
 98          for ( var I =  0 ; I <selectedItems.length; I ++ ) {
 99              leftSelect.appendChild (the selectedItems [I]);
 100          }
 101      };
 102  
103      // double-click event 
104      leftSelect.ondblclick =  function () {
 105          // double-click the left select control events 
106  //         Alert (leftSelect.selectedIndex); 
107          rightSelect.appendChild (leftItems [leftSelect.selectedIndex]);
 108      };
 109  
110      rightSelect.ondblclick =  function () {
 111         leftSelect.appendChild(rightItems[rightSelect.selectedIndex]);
112     };
113 </script>
114 <!--<script type="text/javascript" src="js/selectTest.js"></script>-->
115 </body>
116 </html>
JavaScript drop-down box select the option to move operations

Guess you like
