jQuery 下拉框應用 拓展

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");
                        });
    }

效果以下：

原圖：

添加部分項到右邊：

選中：

添加到左邊：

感受本身萌萌噠