多选列表Select之双击删除与添加Demo_select多选双击事件edge-优快云博客

本文提供了一个使用HTML和JavaScript实现的简单示例，演示如何通过双击操作将下拉选项从一个选择框移动到另一个选择框，并展示了如何显示目标选择框的内容。

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

<html>

<head>

    <script>

        function removeItem(){

            var sltSrc=document.getElementById('sltSrc');

            var sltTarget=document.getElementById('sltTarget');

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

            {

                var tempOption=sltSrc.options[i];

                if(tempOption.selected){

                    sltSrc.removeChild(tempOption);

                    sltTarget.appendChild(tempOption);

                }    

            }

        }

        

        function addItem(){

            var sltSrc=document.getElementById('sltSrc');

            var sltTarget=document.getElementById('sltTarget');

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

            {

                var tempOption=sltTarget.options[i];

                if(tempOption.selected){

                    sltTarget.removeChild(tempOption);

                    sltSrc.appendChild(tempOption);

                }    

            }

        }

        function showSelectOptions(){

            var sltTarget=document.getElementById('sltTarget');

            var myhtml="";

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

            {

                myhtml +="Select Item" + i + ":  text= " + sltTarget.options[i].text + ", value=" + sltTarget.options[i].value + "<br/>";

            }

            document.getElementById("showInfo").innerHTML=myhtml;

        }

    </script>

</head>

<body>

    <select ondblclick="removeItem();" id="sltSrc" multiple="true" style="height:150px;width:150px">

        <option value="a">srcA</option>

        <option value="b">srcB</option>

        <option value="c">srcC</option>

    </select>

    <select ondblclick="addItem();" id="sltTarget"  multiple="true" style="height:150px;width:150px">

        <option value="a">targetA</option>

        <option value="b">targetB</option>

        <option value="c">targetC</option>

    </select>

    <div id="showInfo"></div>

    <input type="button" value="showSelectOptions"  onclick="showSelectOptions();"/>

</body>

</html>