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

最新推荐文章于 2021-10-30 16:54:59 发布

Francis_yxx

最新推荐文章于 2021-10-30 16:54:59 发布

阅读量3.4k

点赞数

分类专栏： CSS JavaScript J# XHTML HTML

本文链接：https://blog.csdn.net/yuxingxing198812/article/details/16945945

版权

本文介绍如何使用JavaScript实现两个select下拉框之间的选项元素互相移动的功能，包括选择和移除操作，提高用户交互体验。

摘要由CSDN通过智能技术生成

今天闲着没事用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