JavaScript 选择框选项移动

最新推荐文章于 2024-07-14 12:56:18 发布

MEX651938106

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量361

点赞数

分类专栏： javascript 文章标签： javascript 选择框移动

本文链接：https://blog.csdn.net/MEX651938106/article/details/74625814

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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=">" οnclick="selToRight();" /><br />
           <input type="button" value="<" οnclick="selToLeft();"/><br />
           <input type="button" value=">>" οnclick="selAllToRight();" /><br />
           <input type="button" value="<<" οnclick="selAllToLeft();" /><br />
       </div>

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

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