DOM操作和jQuery实现选项移动操作

时间：2024-07-18 22:07:38

DOM：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM选项移动操作</title>

     <style>

         select {

             width: 100px;

             height: 85px;

         }

         div {

             display: inline-block;

             width: 50px

         }

     </style>

 </head>

 <body>

          <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>

         <div>

             <button onclick="move(this.innerHTML)">&gt;&gt;</button>

             <button onclick="move(this.innerHTML)">&gt;</button>

             <button onclick="move(this.innerHTML)">&lt;</button>

             <button onclick="move(this.innerHTML)">&lt;&lt;</button>

         </div>

         <select id="sel" size="5" multiple>

         </select>

     <script>

         function $(id){

             return document.getElementById(id);

         }

         var unsel=null;//保存所有备选国家列表

         var sel=[];//保存已选中的国家列表

         window.onload=function(){

             unsel=$("unsel").innerHTML

                             .replace(/<\/?option>/g," ")

                             .match(/\b[a-zA-Z]+\b/g);

         }

         function move(inner){

             switch (inner){

                 case "&gt;&gt;"://全部右移

                     sel=sel.concat(unsel);

                     unsel.length=0;

                     sel.sort();

                     break;

                 case "&lt;&lt;"://全部左移

                     unsel=unsel.concat(sel);

                     sel.length=0;

                     unsel.sort();

                     break;

                 case "&gt;"://选中项右移

                     var opts=document.querySelectorAll("#unsel option");

                     //从后向前遍历每个option

                     for(var i=opts.length-1;i>=0;i--){

                         if(opts[i].selected){

                         //删除unsel中i位置的1个元素,直接压入sel

                             sel.push(unsel.splice(i,1)[0]);

                         }

                     }

                     sel.sort();

                     break;

                 case "&lt;"://选中项左移

                     var opts=document.querySelectorAll("#sel option");

                     for(var i=opts.length-1;i>=0;i--){

                         if(opts[i].selected){

                             unsel.push(sel.splice(i,1)[0]);

                         }

                     }

                     unsel.sort();

                     break;

             }

             show();

         }

         function show(){//将两个数组，更新到select元素中

             $("unsel").innerHTML="<option>"

                                 +unsel.join("</option><option>")

                                 +"</option>";

             $("sel").innerHTML="<option>"

                                 +sel.join("</option><option>")

                                 +"</option>";

         }

     </script>

 </body>

 </html>

jquery:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>选项移动操作</title>

     <script src="jquery.min.js"></script>

     <style>

         select {

             width: 100px;

             height: 85px;

         }

         div {

             display: inline-block;

             width: 50px

         }

     </style>

 </head>

 <body>

     <select id="first" 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>

     <div>

         <button id="add">&gt;</button>

         <button id="add_all">&gt;&gt;</button>

         <button id="remove">&lt;</button>

         <button id="remove_all">&lt;&lt;</button>

     </div>

     <select id="second" size="5" multiple>

     </select>

     <script>

             $("#add").click(function(){

                 // 将左边被选中的选项,移到右边去

                 $("#first>option:selected").appendTo($("#second"));

             });

             $("#add_all").click(function(){

                 $("#first>option").appendTo($("#second"));

             });

             $("#remove").click(function(){

                 $("#second>option:selected").appendTo($("#first"));

             });

             $("#remove_all").click(function(){

                 $("#second>option").appendTo($("#first"));

             });

             // 双击事件

             $("#first").dblclick(function(){

                 $("#first>option:selected").appendTo($("#second"));

             });

             $("#second").dblclick(function(){

                 $("#second>option:selected").appendTo($("#first"));

             });

     </script>

 </body>

 </html>

相关文章