js 学习两个下拉框左右移动的功能_js在两个下拉列表中移动水果-优快云博客

本文链接：https://blog.youkuaiyun.com/y_yJava/article/details/81916492

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Document</title>
   <style type="text/css">
       #right,#op,#left{
           float: left;
           width: 100px;
           height: 200px;
       }
   </style>
   <script type="text/javascript">

       function moveOne(fromid,toid) {
           var from =document.getElementById(fromid);
           var to =document.getElementById(toid);
           var index=from.selectedIndex;
           if(index<0){
               return;
           }
       /*   alert(index);*/
           options=from.getElementsByTagName('option');
           var item = options[index].cloneNode(true);
           to.appendChild(item);
           options[index].remove();

       }
       function moveAll(formid,toid) {
           var from =document.getElementById(formid);
           var to =document.getElementById(toid);

           var index=from.selectedIndex;

           var opts=to.getElementsByTagName("option");
           var from_opts=from.getElementsByTagName("option");
           /*   alert(opts.length);
               alert(from_opts.length);*/
               if(from_opts.length==0){
                   return;
               }
           for (var i = 0;i<opts.length;) {
               opts[0].remove();

           }
               for (var i = 0;i<from_opts.length;) {
               var item=from_opts[0].cloneNode(true);
               to.appendChild(item);
               from_opts[0].remove();

}

       /*   var select=to.cloneNode(true);
           to.remove();
           var body=document.getElementById("body");
           body.appendChild(select);*/
       }
   </script>
</head>
<body id="body">
   <select size="8" name="" id="left">
       <option value="">选项1</option>
       <option value="">选项2</option>
       <option value="">选项3</option>
       <option value="">选项4</option>
       <option value="">选项5</option>
       <option value="">选项6</option>
       <option value="">选项7</option>
       <option value="">选项8</option>
   </select>
   <div id="op">
       <input type="button" value=">" οnclick="moveOne('left','right')"><br><br>
       <input type="button" value=">>" οnclick="moveAll('left','right')"><br><br>
       <input type="button" value="<" οnclick="moveOne('right','left')"><br><br>
       <input type="button" value="<<" οnclick="moveAll('right','left')"><br><br>
   </div>
   <select name="" id="right" size="8">

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