JavaScript：两个可以互相交换数据的列表框

最新推荐文章于 2021-03-25 14:31:20 发布

qiankuny

最新推荐文章于 2021-03-25 14:31:20 发布

阅读量594

点赞数

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
    <html>    
      <head>    
        <title>addMulitOptions.html</title>    
            
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    
        <meta http-equiv="description" content="this is my page">    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
        <script type="text/javascript">   
            // 移动id为from的列表中的选中项到id为to的列表中  
            function move(from,to) {    
                // 获取移动源  
                var fromBox = document.getElementById(from);    
                // 获取移动目的地  
                var toBox = document.getElementById(to);  
                // 当移动源存在选中项时  
                while(fromBox.selectedIndex != -1){  
                    // 将移动源中的选中项添加到移动目的地的末尾  
                    toBox.appendChild(fromBox.options[fromBox.selectedIndex]);  
                }  
            }    
      
            // 移动id为from的列表中的所有项到id为to的列表中  
            function moveAll(from,to) {    
                // 获取移动源  
                var fromBox = document.getElementById(from);    
                // 获取移动目的地  
                var toBox = document.getElementById(to);  
                // 当移动源存在选中项时  
                while(fromBox.options.length > 0){  
                    // 将移动源中的选中项添加到移动目的地的末尾  
                    toBox.appendChild(fromBox.options[0]);  
                }  
            }    
        </script>    
      </head>    
          
      <body>    
        <select id="leftBox" multiple="multiple" style="height: 200px; width: 100px;">    
            <option value="1">a</option>    
            <option value="2">b</option>    
            <option value="3">c</option>    
            <option value="4">d</option>    
        </select>    
        <input type="button" value=">" οnclick="move('leftBox','rightBox')"/>    
        <input type="button" value="<" οnclick="move('rightBox','leftBox')"/>    
        <input type="button" value=">>" οnclick="moveAll('leftBox','rightBox')"/>    
        <input type="button" value="<<" οnclick="moveAll('rightBox','leftBox')"/>    
        <select id="rightBox" multiple="multiple" style="height: 200px; width: 100px;">    
            <option value="11">A</option>    
            <option value="22">B</option>    
            <option value="33">C</option>    
            <option value="44">D</option>    
        </select>    
      </body>    
    </html>