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

效果如下：

原图：

添加部分项到右边：

选中：

添加到左边：

感觉自己萌萌哒