JQueryは、ドロップダウンボックスの[選択]オプションの左右の動きを実現します

Webサイトのバックエンドインターフェイスの[責任チャネル]領域で、ユーザーはボタンを使用して左側から右側に選択したオプションを追加するか、右側から左側にオプションを追加するか、オプションをダブルクリックできます。相手に追加します。実行結果は以下のとおりです。

（1）ページコード：

<!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）コントローラーコード：

/**
 * 频道控制器
 * @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は、ドロップダウンボックスの[選択]オプションの左右の動きを実現します

おすすめ