HTML+JS实现左边select移动到右边select

灰太狼 2023-10-18 09:39 129阅读 0赞

如图所示：左右两个select标签，左边有10个option，

要求实现双击左侧选项即可移动到右侧，选择选项后点击“批量右移”可以移动到右侧，点击“全部右移”则全部一次性右移到右侧。

![70][]

实现代码如下：

<div id="" style="position: absolute;left: 10px;top: 20px;">
    	<select style="width: 70px;" id="leftID" size="10" multiple="multiple" >
    		<option value="">A</option>
    		<option value="">B</option>
    		<option value="">C</option>
    		<option value="">D</option>
    		<option value="">E</option>
    		<option value="">F</option>
    		<option value="">G</option>
    		<option value="">H</option>
    		<option value="">I</option>
    		<option value="">J</option>
    	</select>
    </div>
    <div id="" style="position: absolute;left: 100px;top: 60px;">
    	<input type="button" name="rightMoveID" id="rightMoveID" value="批量右移" />		
    </div>
    <div id="" style="position: absolute;left: 100px;top: 90px;">
    	<input type="button" name="rightMoveAllID" id="rightMoveAllID" value="全部右移" />		
    </div>
    <div id="" style="position: absolute;left: 200px;top: 20px;">
    	<select style="width: 70px;" id="rightID" size="10" multiple="multiple"></select>		
    </div>
    <script type="text/javascript">
    	document.getElementById("leftID").ondblclick = function() {
    		var optionElement = this[this.selectedIndex];
    		document.getElementById("rightID").appendChild(optionElement) ;
    	}
    	document.getElementById("rightMoveAllID").onclick = function() {
    		var leftSelectElement = document.getElementById("leftID") ;
    		var size = leftSelectElement.length;
    		for(var i=0;i<size;i++) {
    			var optionElement = leftSelectElement.options[0] ;
    			document.getElementById("rightID").appendChild(optionElement) ;
    		}
    	}
    	document.getElementById("rightMoveID").onclick = function(){
    		var selectElement = document.getElementById("leftID") ;
    		var optionElements = selectElement.getElementsByTagName("option") ;
    		for(var i=0;i<optionElements.length;i++) {
    			if(optionElements[i].selected == true) {
    				document.getElementById("rightID").appendChild(optionElements[i]) ;
    				i=i-1;//解释为什么要减一，
    				//每次移动那个option后，那个option就会被删除，
    				//所以需要把index移动到被删除的那个option的前一个index那里才可以。
    			}
    		}
    	}
    </script>

代码拙劣啊哈哈。

[70]: https://img-blog.csdn.net/20181010215933554?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkwMzc3MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70