下拉框應用

裝載自《鋒利的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");
        });