select批量操作

【Javascript】

下载

新闻

文章

select批量操作

<style type="text/css">
    input{width:50px}
    select{width:100px;height:150px}
</style>
<table border="1">
    <tr>
        <td>
            <select id="select1" size="10" multiple="multiple">
                <option value="选项1">选项1</option>
                <option value="选项2">选项2</option>
                <option value="选项3">选项3</option>
                <option value="选项4">选项4</option>
                <option value="选项5">选项5</option>
                <option value="选项6">选项6</option>
                <option value="选项7">选项7</option>
                <option value="选项8">选项8</option>
                <option value="选项9">选项9</option>
            </select>
        </td>
        <td align="center" width="50">
            <input type="button" onclick="moveOption(1,1)" value="-->"/>
            <input type="button" onclick="moveOption(1,2)" value="==>"/>
            <input type="button" onclick="moveOption(2,1)" value="<--"/>
            <input type="button" onclick="moveOption(2,2)" value="<=="/>
        </td>
        <td>
            <select id="select2" size="10" multiple="multiple"></select>
        </td>
    </tr>
</table>
<script type="text/javascript">
    function moveOption(l,i){
        var s1=document.getElementById("select"+l);
        var s2=document.getElementById("select"+(l==2?1:2));
        for(var n = s1.options.length - 1; n >= 0; n--){
            if((s1[n].selected == true&&1==i)||2==i){
                var option=new Option(s1.options[n].text,s1.options[n].value);
                s2.add(option);
                s1.options.remove(n);
           }
        }
    }
</script>