两个列表项中的内容相互切换

最新推荐文章于 2021-01-28 18:59:39 发布

linqingyu310

最新推荐文章于 2021-01-28 18:59:39 发布

阅读量335

点赞数

分类专栏： js

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title></title>  
    <script type="text/javascript"> 
		function move(from,to){
            var fromBox = document.getElementById(from);  
            var toBox = document.getElementById(to);
			while(fromBox.selectedIndex != -1){
				toBox.appendChild(fromBox.options[fromBox.selectedIndex]);//注意appendChild()将原select中元素拿走添加到另一个select中，而不是复制
			}
        }  

        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>a</option>  
        <option>b</option>  
        <option>c</option>  
        <option>d</option>  
    </select>  
	
	<input type="button" value="<" οnclick="move('rightBox','leftBox')" />  
	<input type="button" value=">" οnclick="move('leftBox','rightBox')" />
    <input type="button" value="<<" οnclick="moveAll('rightBox','leftBox')" /> 	
    <input type="button" value=">>" οnclick="moveAll('leftBox','rightBox')" />  
 
   
    <select id="rightBox" multiple="multiple" style="height: 200px; width: 100px;">  
        <option>A</option>  
        <option>B</option>  
        <option>C</option>  
        <option>D</option>  
    </select>  
  </body>  
</html>

如图所示：

<img src="https://img-blog.csdn.net/20140815151804460?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlucWluZ3l1MzEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

参考转载自： http://blog.csdn.net/qq378527566/article/details/7736683