用js实现两个select下拉框之间的元素互相移动 -

yuxingxing1988

浏览: 55048 次
性别:
来自: 北京

最近访客更多访客>>

yangger1

lvc2103

yuan0166

我的无奈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

用js实现两个select下拉框之间的元素互相移动

JavaScript J#CSS XHTML HTML

今天闲着没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。

<script type="text/javascript">

	
	/**选中的元素向右移动**/
 	function moveRight()
	{
		
			//得到第一个select对象
		var selectElement = document.getElementById("first");
		var optionElements = selectElement.getElementsByTagName("option");
		var len = optionElements.length;
	

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

<hr/>
上面是javascript代码，下面是html加css代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	.select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;}
	.select_move_1 { float:left;}
	.select_move_2 { float:left;}
	.select_move_3 { float:left;}
</style>
</head>

<body>
	<div class="select_move">
    
        <div class="select_move_1">
          <select name="first" size="10" id="first" multiple="multiple">
            <option value="宝马">宝马</option>
            <option value="丰田">丰田</option>
            <option value="奥迪">奥迪</option>
            <option value="凯迪拉克">凯迪拉克</option>
            <option value="现代">现代</option>
            <option value="奔驰">奔驰</option>
            <option value="法拉利">法拉利</option>
            
          </select>
        </div>
          <div class="select_move_2">
                <input type="button" value="------>" onclick="moveRight()"/><br />
                <input type="button" value="===>" onclick="moveAll()" /><br />
                <input type="button" value="<------"  onclick="moveLeft()"/><br />
                <input type="button" value="<===" onclick="moveAllLeft()"/>
          </div>
        <div class="select_move_3">
        	 <select size="10" id="secend" multiple="multiple">
   		     </select>
        </div>
    </div>
   
</body>
</html>