美文网首页
18.综合案例2

18.综合案例2

作者: 若愚同学 | 来源:发表于2018-06-12 22:13 被阅读0次
HTML:
<body>
    <table border="1">
        <tr>
            <td>
                <select id="select1" style="width:100px;height:200px" 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">
                <input type="button" onclick="moveSelected('select1','select2')" value="-->"/><br/>
                <input type="button" onclick="moveAll('select1','select2')" value="==>"/><br/>
                <input type="button" onclick="moveSelected('select2','select1')" value="<--"/><br/>
                <input type="button" onclick="moveAll('select2','select1')" value="<=="/>
            </td>
            <td>
                <select id="select2" style="width:100px;height:200px" size="10" multiple="multiple"></select>
            </td>
        </tr>
    </table>
</body>
JS:
function moveSelected(srcEl,targetEl){
    
    //获取select1节点对象
    var select1 = document.getElementById(srcEl);
    var sels = select1.selectedOptions;//获取select1中所有被选中的子节点
    
    //获取select2节点对象
    var select2 = document.getElementById(targetEl);
    while(sels.length > 0){
        select2.appendChild(sels[0]);
    }
    
}

function moveAll(srcEl,targetEl){
    //获取select1节点对象
    var select1 = document.getElementById(srcEl);
    var sels = select1.children;//获取select1中所有的子节点
    
    //获取select2节点对象
    var select2 = document.getElementById(targetEl);
    while(sels.length > 0){
        select2.appendChild(sels[0]);
    }
}

相关文章

网友评论

      本文标题:18.综合案例2

      本文链接:https://www.haomeiwen.com/subject/cixdeftx.html