JQuery erkennt die linke und rechte Bewegung der Option Auswählen des Dropdown-Felds

In einer Backend-Oberfläche einer Website kann der Benutzer im Bereich "Verantwortlicher Kanal" die links links rechts ausgewählte Option über die Schaltfläche hinzufügen oder die Option rechts links hinzufügen oder auf die Option doppelklicken um es der anderen Partei hinzuzufügen. Das Ausführungsergebnis lautet wie folgt:

(1) Seitencode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>负责频道</title>
    <meta name="author" content="pan_junbiao的博客">
    <style>
        table { border-collapse: collapse;}
        table,table tr th, table tr td { border:1px solid #000000; padding: 5px 10px;}
        .select{ padding: 3px; width:125px; height:160px; font-size: 16px;}
        .btn{ padding: 5px; font-size: 14px; margin-top: 10px; display: list-item;}
        .selBox{ float: left;}
    </style>
</head>
<body>
<div align="center">
    <table>
        <caption>用户信息</caption>
        <tr>
            <th>用户名称：</th>
            <td>pan_junbiao的博客</td>
        </tr>
        <tr>
            <th>博客地址：</th>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
        <tr>
            <th>博客信息：</th>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
        </tr>
        <tr>
            <th>负责频道：</th>
            <td>
                <div class="selBox">
                    <select multiple id="select1" class="select"></select>
                    <input type="button" class="btn" id="btnToRight" value="选项添加到右边&gt;&gt;"/>
                    <input type="button" class="btn" id="btnAllToRight" value="全部添加到右边&gt;&gt;"/>
                </div>
                <div class="selBox" style="width: 20px">&nbsp;</div>
                <div class="selBox">
                    <select multiple id="select2" class="select"></select>
                    <input type="button" class="btn" id="btnToLeft" value="&lt;&lt;选项添加到左边"/>
                    <input type="button" class="btn" id="btnAllToLeft" value="&lt;&lt;全部添加到左边"/>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function()
    {
        //获取频道列表
        getChannelList();

        //选项添加到右边
        $("#btnToRight").click(function(){
            var $option = $("#select1 option:selected"); //获取选中的选项
            $option.appendTo("#select2"); //追加给对方，appendTo()方法实现删除和追加功能
        });

        //全部添加到右边
        $("#btnAllToRight").click(function(){
            var $option = $("#select1 option"); //获取全部的选项
            $option.appendTo("#select2"); //追加给对方
        });

        //选项添加到左边
        $("#btnToLeft").click(function(){
            var $option = $("#select2 option:selected"); //获取选中的选项
            $option.appendTo("#select1"); //追加给对方
        });

        //全部添加到左边
        $("#btnAllToLeft").click(function(){
            var $option = $("#select2 option"); //获取全部的选项
            $option.appendTo("#select1"); //追加给对方
        });

        //select1绑定双击事件
        $("#select1").dblclick(function(){
            var $option = $("option:selected",this); //获取选中的选项
            $option.appendTo("#select2"); //追加给对方
        });

        //select2绑定双击事件
        $("#select2").dblclick(function(){
            var $option = $("option:selected",this); //获取选中的选项
            $option.appendTo("#select1"); //追加给对方
        });
    })

    //获取频道列表
    function getChannelList()
    {
        //执行Ajax请求，动态绑定数据
        $.ajax({
            type: "POST",
            url: "/getChannelList",
            async: true,
            dataType: "json",
            success: function (data) {
                if (data && data.length > 0) {
                    //遍历数据
                    for (var i = 0; i < data.length; i++) {
                        //绑定数据
                        var option = "<option value=" + data[i].value + ">" + data[i].text + "</option>";
                        $("#select1").append(option);
                    }
                }
            }
        });
    }

</script>
</html>

(2) Controller-Code:

/**
 * 频道控制器
 * @author pan_junbiao
 **/
@Controller
public class ChannelController
{
    /**
     * 进入页面
     */
    @RequestMapping("toChannelView")
    public String toChannelView()
    {
        return "channel.html";
    }

    /**
     * 获取频道列表
     */
    @RequestMapping("getChannelList")
    @ResponseBody
    public List<OptionModel> getChannelList()
    {
        List<OptionModel> optionModelList = new ArrayList<>();
        optionModelList.add(new OptionModel("铃儿叮当",1));
        optionModelList.add(new OptionModel("细说茂名",2));
        optionModelList.add(new OptionModel("夜韵飞扬",3));
        optionModelList.add(new OptionModel("皆大欢喜",4));
        optionModelList.add(new OptionModel("时尚生活",5));
        optionModelList.add(new OptionModel("音乐故事",6));
        optionModelList.add(new OptionModel("广播剧场",7));
        return optionModelList;
    }
}

JQuery erkennt die linke und rechte Bewegung der Option Auswählen des Dropdown-Felds

Ich denke du magst