某网站的一个后台界面，在“负责频道”这个区域，用户可以通过按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。执行结果如下图：
（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>/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**/@Controllerpublic class ChannelController{/*** 进入页面*/@RequestMapping("toChannelView")public String toChannelView(){return "channel.html";}/*** 获取频道列表*/@RequestMapping("getChannelList")@ResponseBodypublic 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;}}
