模擬實現Select列表元素左右移動

要求:模擬實現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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章