js实现两个列表框交换数据

最新推荐文章于 2023-01-02 16:22:09 发布

业余选手

最新推荐文章于 2023-01-02 16:22:09 发布

阅读量3.2k

点赞数

分类专栏： Web 文章标签： html

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

分类： JavaScript 2012-07-11 15:28 1344人阅读评论(4) 收藏举报

 
 javascript 
 button 
 html 
 input 
 function 

还是那位博主的一篇关于JavaScript js 左右移动下拉列表选项的文章，我也用自己的方法实现了一下，感觉还是使用js原生的方法比较方便、简单。

这个js的效果是，点击》按钮，使左边列表中被选中项添加到右边的列表，并移除左边列表中的选中项；反之，点《按钮，使右边列表中被选中项添加到左边的列表，并移除右边列表中被选中项。两个列表支持多选。

[html]view plaincopy 
    
 <!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=">" onclick="move('leftBox','rightBox')"/>    
     <input type="button" value="<" onclick="move('rightBox','leftBox')"/>    
     <input type="button" value=">>" onclick="moveAll('leftBox','rightBox')"/>    
     <input type="button" value="<<" onclick="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>  

业余选手

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js实现两个列表框交换数据

JavaScript：两个可以互相交换数据的列表框分类： JavaScript2012-07-11 15:28 1344人阅读评论(4) 收藏举报javascriptbuttonhtmlinputfunction还是那位博主的一篇关于JavaScript js 左右移动下拉列表选项的文章，我也用自己的方法实现了一下，感觉还是使用js原生的方法比较方便、简单。
复制链接

扫一扫