JQuery实现下拉框Select选项的左右移动

﹏ヽ暗。殇╰゛Y 2021-09-02 05:33 483阅读 0赞

某网站的一个后台界面，在“负责频道”这个区域，用户可以通过按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。执行结果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70][]

（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="选项添加到右边>>"/>
                        <input type="button" class="btn" id="btnAllToRight" value="全部添加到右边>>"/>
                    </div>
                    <div class="selBox" style="width: 20px"> </div>
                    <div class="selBox">
                        <select multiple id="select2" class="select"></select>
                        <input type="button" class="btn" id="btnToLeft" value="<<选项添加到左边"/>
                        <input type="button" class="btn" id="btnAllToLeft" value="<<全部添加到左边"/>
                    </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;
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70]: /images/20210724/0302905898014edd92a945c55d81f347.png