实现两个select下拉框内容切换

这个小案例用到了节点操作，事件定义的知识点，效果如图所示：
在这里插入图片描述
实现方法也很简单，在js定义四个按钮点击事件，把遍历select出来的子节点改变它们的父节点就可以实现。

代码：

<body>
	<select id = 'all' multiple="multiple">
		<option>苹果</option>
		<option>西瓜</option>
		<option>梨</option>
		<option>橘子</option>
		<option>水蜜桃</option>
	</select>

	<input type="button" value='>>' id = 'btn1'>
	<input type="button" value='<<' id = 'btn2'>
	<input type="button" value='>' id = 'btn3'>
	<input type="button" value='<' id = 'btn4'>

	<select id = 'select' multiple="multiple">	
	</select>
	<script>
		var all = document.getElementById('all');
		var opt1 = all.children;	//左侧列表的五个子元素
		var select = document.getElementById('select');
		var opt2 = select.children;		//右侧列表的五个子元素
		var btn1 = document.getElementById('btn1');
		var btn2 = document.getElementById('btn2');
		var btn3 = document.getElementById('btn3');
		var btn4 = document.getElementById('btn4');	
		btn1.onclick = function(){
			var len1 = opt1.length;
			for(var i = 0;i < len1 ;i++){
				select.appendChild(opt1[0]);
			}
		}	//全部向右
		btn2.onclick = function(){
			var len2 = opt2.length;
			for(var i = 0;i < len2 ;i++){
				all.appendChild(opt2[0]);
			}
		}	//全部向左
		btn3.onclick = function(){
			for(var i = opt1.length - 1;i >= 0;i--){
				if(opt1[i].selected == true){
					opt1[i].selected = false;
					select.appendChild(opt1[i]);
				}
			}
		}
		btn4.onclick = function(){
			for(var i = opt2.length - 1;i >= 0;i--){
				if(opt2[i].selected == true){
					all.appendChild(opt2[i]);
					
				}
			}
		}
		

	</script>
</body>

当中碰到了一些小问题，就比如事件里的for循环，我最早写的代码是这样的：

for(var i = 0;i < opt1.length;i++)

这样写的话btn1/btn2的点击效果会变成只拖过去了三个元素，分析了下原因，是因为每循环一次，原子节点的数组(opt1[])长度会减1.
其他也就没啥问题啦。

实现两个select下拉框内容切换

猜你喜欢