JavaScript 选择框选项移动

来源：互联网发布：淘宝主图psd模版编辑：程序博客网时间：2024/06/05 22:41

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           select{
               width: 100px;
               height: 150px;
           }
           div{
               float: left;
               margin:auto 10px ;
           }
           input{
               width: 50px;
               margin: 5px auto;
           }
       </style>

       <script>

           function selToRight(){
               var selLeft = document.getElementById("selLeft");
               var selRight = document.getElementById("selRight");

               var ops = selLeft.getElementsByTagName("option");
               for(var i=0; i<ops.length; i++){
                   var o= ops[i];
                   if(o.selected==true){
                       selRight.appendChild(o);
                       i--;
                   }
               }
           }
           function selAllToRight(){
               var selLeft = document.getElementById("selLeft");
               var selRight = document.getElementById("selRight");

               var ops = selLeft.getElementsByTagName("option");
               for(var i=0; i<ops.length; i++){
                   var o= ops[i];
                       selRight.appendChild(o);
                       i--;
               }
           }

           function selToLeft(){
               var selLeft = document.getElementById("selLeft");
               var selRight = document.getElementById("selRight");

               var ops = selRight.getElementsByTagName("option");
               for(var i=0; i<ops.length; i++){
                   var o= ops[i];
                   if(o.selected==true){
                       selLeft.appendChild(o);
                       i--;
                   }
               }
           }

           function selAllToLeft(){
               var selLeft = document.getElementById("selLeft");
               var selRight = document.getElementById("selRight");

               var ops = selRight.getElementsByTagName("option");
               for(var i=0; i<ops.length; i++){
                   var o= ops[i];

                       selLeft.appendChild(o);
                       i--;

               }
           }
       </script>


   </head>
   <body>
       <div class="sel01">
           <select id="selLeft" multiple="multiple" >
               <option>篮球</option>
               <option>足球</option>
               <option>乒乓球</option>
               <option>排球</option>
               <option>羽毛球</option>
           </select>
       </div>

       <div class="btn">
           <input type="button" value=">" onclick="selToRight();" /><br />
           <input type="button" value="<" onclick="selToLeft();"/><br />
           <input type="button" value=">>" onclick="selAllToRight();" /><br />
           <input type="button" value="<<" onclick="selAllToLeft();" /><br />
       </div>

       <div class="sel02">
           <select id="selRight" multiple="multiple">

           </select>
       </div>
   </body>
</html>

阅读全文

0 0

JavaScript 选择框 选项移动

JavaScript 选择框选项移动