JS 实现权限列表移动

JS 实现列表移动

学习内容:

需求

用 JS 实现列表移动
在这里插入图片描述

实现代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>列表移动</title>
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
    </script>
    <script>
        function moveAll(srcId, targetId) {
            // ('#' + targetId)拼接字符串
            $('#' + targetId).append($("#" + srcId + " > option"));
        }
        function moveSelected(srcId, targetId) {
            // ('#' + targetId)拼接字符串
            $('#' + targetId).append($('#' + srcId + ' > option:selected'));
        }
    </script>
</head>
<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>
</html>

总结:

以上就是用 JS 实现列表移动,代码的简单实现了,仅供参考,欢迎讨论交流。

posted @ 2021-05-29 22:16  Yan_Yang  阅读(101)  评论(0编辑  收藏  举报