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: 50px 15 } 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)">>></button> 22 <button onclick="move(this.innerHTML)">></button> 23 <button onclick="move(this.innerHTML)"><</button> 24 <button onclick="move(this.innerHTML)"><<</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").innerHTML 36 .replace(/<\/?option>/g," ") 37 .match(/\b[a-zA-Z]+\b/g); 38 } 39 function move(inner){ 40 switch (inner){ 41 case ">>"://全部右移 42 sel=sel.concat(unsel); 43 unsel.length=0; 44 sel.sort(); 45 break; 46 case "<<"://全部左移 47 unsel=unsel.concat(sel); 48 sel.length=0; 49 unsel.sort(); 50 break; 51 case ">"://选中项右移 52 var opts=document.querySelectorAll("#unsel option"); 53 //从后向前遍历每个option 54 for(var i=opts.length-1;i>=0;i--){ 55 if(opts[i].selected){ 56 //删除unsel中i位置的1个元素,直接压入sel 57 sel.push(unsel.splice(i,1)[0]); 58 } 59 } 60 sel.sort(); 61 break; 62 case "<"://选中项左移 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: 50px 16 } 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">></button> 35 <button id="add_all">>></button> 36 <button id="remove"><</button> 37 <button id="remove_all"><<</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>
