jquery 書本上的一個例子

書本上只寫了從左邊添加到右邊，無非就是remove() 方法和 appendTo() 方法。

然而，我試過了，并不能像從左邊添加到右邊那樣簡單的把右邊的刪除到左邊過來。

然后自己整了一份可以兩邊任意添加到對方的。

HTML代碼如下：

<div class="equips"><div><p class="tips">您正在對用戶: XXX 分配設備!</p><a href="#" class="btn" id="save_equip">保存</a></div><form class="equip_list" id="equip_list"><span class="show">可選設備列表:</span><ul><li><input type="text" name="equips" value="設備1"></li><li><input type="text" name="equips" value="設備2設備2設備2"></li><li><input type="text" name="equips" value="設備3"></li><li><input type="text" name="equips" value="設備4"></li><li><input type="text" name="equips" value="設備5"></li><li><input type="text" name="equips" value="設備6"></li><li><input type="text" name="equips" value="設備7"></li><li><input type="text" name="equips" value="設備8"></li></ul></form><form action="url" method="post" class="my_equip_list" id="my_equip_list"><span class="show">用戶設備列表:</span><ul><li><input type="text" name="equips" value="設備a"></li><li><input type="text" name="equips" value="設備s"></li><li><input type="text" name="equips" value="設備d"></li><li><input type="text" name="equips" value="設備f"></li><li><input type="text" name="equips" value="設備g"></li><li><input type="text" name="equips" value="設備h"></li></ul></form><div class="btns"><a href="#" class="btn" id="btn_add">增加>></a><a href="#" class="btn" id="btn_remove"><<刪除</a></div> </div>

?jQuery代碼如下：

$(function(){init(); // 初始化 $("#btn_add").on("click", function(){ // 添加按鈕 左邊列表里面的選項,添加到右邊中var param = {form_ul : $("#my_equip_list ul"),li_selected : $("#equip_list ul li.selected")}selected(param);});$("#btn_remove").on("click", function(){ //刪除按鈕, 將右邊框選中的添加到左邊框中var param = {form_ul : $("#equip_list ul"),li_selected : $("#my_equip_list ul li.selected")}selected(param);});// 設置表單中的input框都是只讀狀態$(".equips form input").attr("readonly", "readonly");// 點擊保存, 提交用戶設備列表表單$("#save_equip").on("click", function(){$("#my_equip_list").form("submit");}) });function init(){ // 綁定事件 選中的添加selected類var li_s = $(".equips form li");li_s.on("click", function(){var _this = $(this);_this.hasClass("selected") ? _this.removeClass("selected") : _this.addClass("selected");});}function selected(param){ // 對選中的選項做的一系列操作param.li_selected.remove().appendTo(param.form_ul).removeClass("selected").on("click", function(){var _this = $(this);_this.hasClass("selected") ? _this.removeClass("selected") : _this.addClass("selected");});}

效果如下：

原圖：

添加部分項到右邊：

選中：

添加到左邊：

感覺自己萌萌噠

轉載于:https://www.cnblogs.com/lal-fighting/p/5806895.html

總結

以上是生活随笔為你收集整理的jQuery 下拉框应用 拓展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。