下拉框应用

下拉框应用

装载自《锋利的JQuery》第五章

<select name="before" class="before" multiple="multiple" style="width: 100px; height: 200px;">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
                <option value="">6</option>
                <option value="">7</option>
            </select>
            <button class="select">></button>
            <button class="selectAll">>></button>
            <select name="after" class="after" multiple="multiple" style="width: 100px; height: 200px;">

//将选中的选项移动到另一个下拉框
        $(".select").click(function(){
            var selected=$('select[name="before"] option:selected');
            selected.appendTo(".after");

        })
//将所有选项移动到另一个下拉框
        $(".selectAll").click(function(){
            var options=$(".before option");
            $("select[name='after']").append(options);
        })
//双击选项移动到另一个下拉框
        $(".after option").dblclick(function(){
            var selected1=$(this);
            selected1.appendTo(".before");
        });
        //运行后该事件无效
//初始状态下 .after 下并没有option ，因此双击事件并没有被绑定，应改成如下代码
        $(".after").dblclick(function(){
//          var selected1=$("option:selected",this);
//或者
            var selected1=$(this).find("option:selected");
            selected1.appendTo(".before");
        });