多选列表Select之双击删除与添加Demo

最新推荐文章于 2021-06-05 17:39:16 发布

转载最新推荐文章于 2021-06-05 17:39:16 发布 · 111 阅读

双击任一Select控件，查看效果：

srcAsrcBsrcCtargetAtargetBtargetC

源码：

<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>