js案例-2 左右select栏目内容互换_select左右切换按钮-优快云博客

这个示例展示了如何使用JavaScript实现两个Select元素之间的选项互换。用户可以通过点击按钮将选中的选项从左侧Select移动到右侧，或者将右侧的选项移回左侧。同时，右侧的Select在接收选项时会进行排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 150px;
            height: 200px;
            background-color: #7bff68;
        }
    </style>
</head>
<body>
	<select size="10" name="aaa" id="sel1" multiple="multiple">
	    <option value="0">1 吕布</option>
	    <option value="1">2 赵云</option>
	    <option value="2">3 关羽</option>
	    <option value="3">4 张飞</option>
	    <option value="4">5 许褚</option>
	    <option value="5">6 马超</option>
	</select>
	
	<input type="button" value="<<<"/>
	<input type="button" value="<"/>
	<input type="button" value=">"/>
	<input type="button" value=">>>"/>
	
	<select size="10" name="bbb" id="sel2" multiple="multiple">
	
	</select>

<script>
    //需求：点击按钮把对应的选中项移动到另一侧。
    //技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
            //如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。

    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    var inpArr = document.getElementsByTagName("input");



//--------------------------------------------- 向右添加 -------------------------------------------


 	
    
    //绑定事件(push和appendChild用法相似：但是一个是控制数组，一个是控制元素节点)
    inpArr[3].onclick = function () {
        var optArr = sel1.children;
        for(var i=0;i<optArr.length;){
            sel2.appendChild(optArr[i]);
        }
    }

    inpArr[2].onclick = function () {
        var optArr = sel1.children;
        for(var i=optArr.length-1;i>=0;i--){
            if(optArr[i].selected==true){
                optArr[i].selected=false;
                sel2.appendChild(optArr[i]);
            }
        }
        //获取sel2中的子元素变成真数组，然后排序
        var aaa = Array.from(sel2.children).sort(function (a,b) {
            return a.value-b.value;
        });
        //删除素有子元素
        for(var i=0;i<sel2.children.length;i++){
            sel2.removeChild(sel2.children[i]);
        }
        //把排好序的数组添加到sel2中
        for(var i=0;i<aaa.length;i++){
            sel2.appendChild(aaa[i]);
        }
    }
   
//--------------------------------------------- 向左添加 -------------------------------------------

   
    inpArr[0].onclick = function () {
        var optArr = sel2.children;
        for(var i=0;i<optArr.length;){
            sel1.appendChild(optArr[i]);
        }
    }
    
    inpArr[1].onclick = function () {
        var optArr = sel2.children;
        for(var i=optArr.length-1;i>=0;i--){
            if(optArr[i].selected==true){
                optArr[i].selected=false;
                sel1.appendChild(optArr[i]);
            }
        }
        var aaa = Array.from(sel1.children).sort(function (a,b) {
            return a.value-b.value;
        });
        for(var i=0;i<sel1.children.length;i++){
            sel1.removeChild(sel1.children[i]);
        }
        for(var i=0;i<aaa.length;i++){
            sel1.appendChild(aaa[i]);
        }
    }
    
</script>

</body>
</html>