模拟实现Select列表元素左右移动

梁云亮

于 2020-05-03 23:58:35 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

分类专栏： # TypeScript/JavaScript/JQuery # HTML/CSS

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/105911116

TypeScript/JavaScript/JQuery 同时被 2 个专栏收录

75 篇文章

订阅专栏

HTML/CSS

17 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的Select列表元素左右移动的方法。通过点击按钮，可以将未分配列表中的选项移动到已分配列表，反之亦然。此功能常用于权限分配或角色管理等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：模拟实现Select列表元素左右移动

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <td>
            <select id="unAssigned" multiple size="10" style="width:150px;overflow-y:auto;">
                <option value="se">SE</option>
                <option value="tl">TL</option>
                <option value="qc">QC</option>
                <option value="pg">PG</option>
            </select>
        </td>
        <td>
            <div id="left2right"> >>> </div>
            <div id="right2left"> <<< </div>
        </td>
        <td>
            <select id="assigned" multiple size="10" style="width:150px;overflow-y:auto;">
            </select>
        </td>
    </tr>
</table>

<script src="jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#assigned").empty();

        $("#left2right").click(function () {  //列表元素向右移动
            let opts = $("#unAssigned :selected");
            if (opts.length == 0) {
                alert("请选择要分配的角色信息");
            } else {
                $("#assigned").append(opts);
            }
        });

        $("#right2left").click(function () { //列表元素向左移动
            let opts = $("#assigned :selected");
            if (opts.length == 0) {
                alert("请选择要撤消的角色信息");
            } else {
                $("#unAssigned").append(opts);
            }
        });
    });
</script>
</body>
</html>