JQuery realizes the left and right movement of the Select option of the drop-down box

In a backend interface of a website, in the "Responsible Channel" area, the user can add the option selected on the left to the right through the button, or add the option on the right to the left, or double-click the option to add it to the other party. The execution result is as follows:

(1) Page code:

<!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 realizes the left and right movement of the Select option of the drop-down box

Guess you like