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

来源：互联网发布：ckplayer 源码编辑：程序博客网时间：2024/06/11 09:44
<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>