你的位置:首页 > Java教程

[Java教程]DOM操作和jQuery实现选项移动操作


DOM:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>DOM选项移动操作</title> 6   <style> 7     select { 8       width: 100px; 9       height: 85px;10     }11 12     div {13       display: inline-block;14       width: 50px15     }16   </style>17 </head>18 <body>19     <select id="unsel" size="5" multiple><option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>China</option><option>Cuba</option><option>Denmark</option><option>Egypt</option><option>France</option><option>Greece</option><option>Spain</option></select>20     <div>21       <button onclick="move(this.innerHTML)">&gt;&gt;</button>22       <button onclick="move(this.innerHTML)">&gt;</button>23       <button onclick="move(this.innerHTML)">&lt;</button>24       <button onclick="move(this.innerHTML)">&lt;&lt;</button>25     </div>26     <select id="sel" size="5" multiple>27     </select>28   <script>29     function $(id){30       return document.getElementById(id);31     }32     var unsel=null;//保存所有备选国家列表33     var sel=[];//保存已选中的国家列表34     window.onload=function(){35       unsel=$("unsel").innerHTML36               .replace(/<\/?option>/g," ")37               .match(/\b[a-zA-Z]+\b/g);38     }39     function move(inner){40       switch (inner){41         case "&gt;&gt;"://全部右移42           sel=sel.concat(unsel);43           unsel.length=0;44           sel.sort();45           break;46         case "&lt;&lt;"://全部左移47           unsel=unsel.concat(sel);48           sel.length=0;49           unsel.sort();50           break;51         case "&gt;"://选中项右移52           var opts=document.querySelectorAll("#unsel option");53           //从后向前遍历每个option54           for(var i=opts.length-1;i>=0;i--){55             if(opts[i].selected){56             //删除unsel中i位置的1个元素,直接压入sel57               sel.push(unsel.splice(i,1)[0]);58             }59           }60           sel.sort();61           break;62         case "&lt;"://选中项左移63           var opts=document.querySelectorAll("#sel option");64           for(var i=opts.length-1;i>=0;i--){65             if(opts[i].selected){66               unsel.push(sel.splice(i,1)[0]);67             }68           }69           unsel.sort();70           break;71       }72       show();73     }74     function show(){//将两个数组,更新到select元素中75       $("unsel").innerHTML="<option>"76                 +unsel.join("</option><option>")77                 +"</option>";78       $("sel").innerHTML="<option>"79                 +sel.join("</option><option>")80                 +"</option>";81     }82   </script>83 </body>84 </html>

 

jquery:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>选项移动操作</title> 6   <script src="jquery.min.js"></script> 7   <style> 8     select { 9       width: 100px;10       height: 85px;11     }12 13     div {14       display: inline-block;15       width: 50px16     }17   </style>18 </head>19 <body>20   <select id="first" size="5" multiple>21     <option>Argentina</option>22     <option>Brazil</option>23     <option>Canada</option>24     <option>Chile</option>25     <option>China</option>26     <option>Cuba</option>27     <option>Denmark</option>28     <option>Egypt</option>29     <option>France</option>30     <option>Greece</option>31     <option>Spain</option>32   </select>33   <div>34     <button id="add">&gt;</button>35     <button id="add_all">&gt;&gt;</button>36     <button id="remove">&lt;</button>37     <button id="remove_all">&lt;&lt;</button>38   </div>39   <select id="second" size="5" multiple>40   </select>41 42   <script>43       $("#add").click(function(){44         // 将左边被选中的选项,移到右边去45         $("#first>option:selected").appendTo($("#second"));46       });47       $("#add_all").click(function(){48         $("#first>option").appendTo($("#second"));49       });50       $("#remove").click(function(){51         $("#second>option:selected").appendTo($("#first"));52       });53       $("#remove_all").click(function(){54         $("#second>option").appendTo($("#first"));55       });56       // 双击事件57       $("#first").dblclick(function(){58         $("#first>option:selected").appendTo($("#second"));59       });60       $("#second").dblclick(function(){61         $("#second>option:selected").appendTo($("#first"));62       });63   </script>64 </body>65 </html>