将下拉列表select中的选项框option中元素移动到右边下拉列表

最新推荐文章于 2023-05-16 19:42:09 发布

原创最新推荐文章于 2023-05-16 19:42:09 发布 · 814 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个HTML页面中的元素移动功能，通过JavaScript实现了Select下拉菜单中的选项向另一个Select菜单的单个、多个及全部移动。此功能在用户界面设计中常见，用于数据筛选或列表操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table align="center">
			<tr>
				<td>
					<select id="left" multiple="true" style="width: 100px" size="12">
						<option>帅</option>
						<option>的</option>
						<option>人</option>
						<option>在</option>
						<option>这</option>
						<option>里</option>
						<option>啊</option>
						<option>看</option>
						<option>过</option>
						<option>来</option>
					</select>
				</td>
				<td>
					<input type="button" value=">" "toRight_Single()"/><br />
					<input type="button" value=">>" "toRight_Multiple()"/><br />
					<input type="button" value=">>>" "toRight3_All()"/><br /><br />
					
					<input type="button" value="<" "toLeft_Single()"/><br />
					<input type="button" value="<<" "toLeft_Multiple()"/><br />
					<input type="button" value="<<<" "toLeft_All()"/><br />
				</td>
				<td>
					<select id="right" multiple="true" style="width: 100px" size="12">
						
					</select>
				</td>
			</tr>
		</table>
	</body>
	
	<script type="text/javascript">
		
		function toRight_Single(){
			  //得到第一个select对象 
			  var left = document.getElementById("left"); 
			  //获取所有的选项
			  var options= left.getElementsByTagName("option"); 
			  //获取选项的个数
			  var len = options.length; 
			  if(!(left.selectedIndex==-1))  //如果没有选择元素，那么selectedIndex就为-1 
			  {
			  	//得到第二个select对象
			    var right = document.getElementById("right"); 
			    right.appendChild(options[left.selectedIndex]);
			  } else
			    { 
			      alert("您还没有选择需要移动的元素！"); 
			    } 
		}
		
		function toRight_Multiple(){
			  //得到第一个select对象 
			  var left = document.getElementById("left"); 
			  var options= left.getElementsByTagName("option"); 
			  var len = options.length; 
			    

			  if(!(left.selectedIndex==-1))  //如果没有选择元素，那么selectedIndex就为-1 
			  {
			  	//得到第二个select对象
			    var right = document.getElementById("right"); 
			    
			    // 向右移动 
			    for(var i=0;i<len ;i++) 
			    { 
			          right.appendChild(options[left.selectedIndex]); 
			    } 
			  } else
			    { 
			      alert("您还没有选择需要移动的元素！"); 
			    } 
		}
		
		 //移动所有的到右边  
	    function toRight3_All() {  
	        //得到第一个select对象  
	        var left = document.getElementById("left");  
	        var options = left.getElementsByTagName("option");  
	        var len = options.length;  
	        //alert(len);  
	      
	        //将第一个selected中的数组翻转  
	        var firstOption = new Array();  
	        for(var k=len-1;k>=0;k--)  
	        {  
	            firstOption.push(options[k]);  
	      
	        }  
	        var lens = firstOption.length;  
	            //得到第二个select对象  
	        var right = document.getElementById("right");  
	        for(var j=lens-1;j>=0;j--)  
	        {  
	            right.appendChild(firstOption[j]);  
	        }  
	    }  
    
	    function toLeft_Single(){
				  //得到第一个select对象 
				  var left = document.getElementById("right"); 
				  var options= left.getElementsByTagName("option"); 
				  var len = options.length; 
				    
	
				  if(!(left.selectedIndex==-1))  //如果没有选择元素，那么selectedIndex就为-1 
				  {
				  	//得到第二个select对象
				    var right = document.getElementById("left"); 
				    right.appendChild(options[left.selectedIndex]);
				  } else
				    { 
				      alert("您还没有选择需要移动的元素！"); 
				    } 
			}
    
		//移动选中的元素到左边  
	    function toLeft_Multiple()  
	    {  
	        //首先得到第二个select对象  
	        var right = document.getElementById("right");  
	        var options = right.getElementsByTagName("option");  
	        var len = options.length;  
	          
	        //再次得到第一个元素  
	        if(!(right.selectedIndex==-1))  
	        {  
	            var left = document.getElementById("left");  
	            for(i=0;i<len;i++)  
	            {  
	                left.appendChild(options[right.selectedIndex]);//被选中的那个元素的索引  
	            }  
	        }else  
	        {  
	            alert("您还没有选中要移动的项目!");  
	        }  
	    }  
	      
	    //全部向左移  
	    function toLeft_All() 
	    {  
	        var right = document.getElementById("right");  
	        var options = document.getElementsByTagName("option");  
	        var len = options.length;  
	        var optionEls = new Array();  
	        for(var i=len-1;i>=0;i--)  
	        {  
	            optionEls.push(options[i]);  
	        }  
	        var lens = optionEls.length;  
	          
	        var left = document.getElementById("left");  
	        for(var j=lens-1;j>=0;j--)  
	        {  
	            left.appendChild(optionEls[j]);  
	        }  
	    }  	
	</script>
</html>