JQuery实现下拉框Select选项的左右移动
生活随笔
收集整理的這篇文章主要介紹了
JQuery实现下拉框Select选项的左右移动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
某網站的一個后臺界面，在“負責頻道”這個區域，用戶可以通過按鈕將左邊選中的選項添加到右邊，也可以將右邊的選項添加到左邊，或者雙擊選項，將其添加給對方。執行結果如下圖：
（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")@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;} }?
總結
以上是生活随笔為你收集整理的JQuery实现下拉框Select选项的左右移动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 武侠：我在六扇门当差（二）
- 下一篇： toshiba 共享文件夹_东芝2051