你的位置:首页 > Java教程

[Java教程]jQuery:实现两个select控件的互移操作


一、直接上代码

 1 <!DOCTYPE html> 2 <html> 3 <head> 4  <meta charset="utf-8" /> 5  <title>index</title> 6 </head> 7 <body> 8   <div> 9     <select id="leftSelector" multiple="multiple" name="SmsListOnLeft" style="height:100px; width:50px">10       <option value="0">0</option>11       <option value="1">1</option>12       <option value="2">2</option>13       <option value="3">3</option>14       <option value="4">4</option>15       <option value="5">5</option>16     </select>17 18     <span style="top: 30px; position: fixed;">19       <input type="button" value="<<" id="btnLeft" />20       <input type="button" value=">>" id="btnRight" />21     </span>22     23     <select id="rightSelector" multiple="multiple" name="SmsListOnRight" style="height:100px; width:50px; margin-left:80px">24       <option value="6">A</option>25       <option value="7">B</option>26       <option value="8">C</option>27       <option value="9">D</option>28       <option value="10">E</option>29     </select>30         31   </div>32   33   <br>34   35   <input type="button" onclick="selectAll()" id="btnSelectAll" value="selectAll" />36   37   <script src="js/jquery-2.1.4.js"></script>38   <script>39     $("#btnRight").click(function () {40       //数据option选中的数据集合赋值给变量vSelect41       var vSelect = $("#leftSelector option:selected");42       //克隆数据添加到 rightSelector 中43       vSelect.clone().appendTo("#rightSelector");44       //同时移除 leftSelector 中的 option45       vSelect.remove();46     });47     48     //right move49     $("#btnLeft").click(function () {50       var vSelect = $("#rightSelector option:selected");51       vSelect.clone().appendTo("#leftSelector");52       vSelect.remove();53     });54 55     function selectAll() {56       var lst1 = window.document.getElementById("rightSelector");57       var length = lst1.options.length;58       for (var i = 0; i < length; i++) {59         var v = lst1.options[i].value;  //option内的value60         var t = lst1.options[i].text;  //显示的文本61         alert(v + ":" + t);62       }63     }64   </script>65   66 </body>67 </html>

 

二、效果图