1

同じオプションのドロップダウンメニューが複数あります。1つのオプションが選択された場合、他のドロップダウンメニューには選択されたオプションが表示されません。選択したオプションをリセットしようとすると、削除した選択オプションが復元されませんでした。

HTML部分：

<select id="selectNumber" class="selectbox">
    <option value="0">Choose a number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="selectNumber2" class="selectbox">
    <option value="0">Choose a number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Javascriptの部分：

$(".selectbox").change(function(){
    var selectedIndex = $(this).index();    
    var myVal = $(this).val();
    $(".selectbox").each(function(i){        
        if (selectedIndex != i){
            $("option", this).each(function(){                
               if (myVal == $(this).val() && myVal != 0){
                   $(this).detach();
               }else{
                   $(this).prepend();
                   //not work

               }

            });
        }
    });
});

デモは機能しません

御時間ありがとうございます。

4

3 に答える 3

0

detach（）を実行すると、オブジェクトが削除され、参照として保存するために「グローバル」変数に入れる必要があります。目的に応じて、.hide（）と.show（）を使用すると、DOMの挿入や削除を行わずに、リスト内のオブジェクトを保持できます（パフォーマンスが大幅に向上します）。

于 2013-02-12T03:52:08.050 に答える
0

選択した値を別のドロップダウンリストに保存していないため、現在のコードは機能しません。また、他の人が言ったように、との代わりにとをhide使用showしdetachますprepend。

あなたはjsfiddleで私の解決策を見ることができます（firefoxでテストされています）

于 2013-02-12T04:02:19.010 に答える
0

これはあなたが望むことをするはずです

/* store options */
var $selects = $(".selectbox");
var $opts = $selects.first().children().clone();


$selects.change(function () {       
    var myVal = $(this).val();
    if (myVal !='0') {
         $selects.not(this).children('[value="'+myVal+'"]').remove();
    }else{
        var replaceVal=$(this).data('currVal');
        $selects.not(this).append( $opts.filter( '[value="'+replaceVal+'"]').clone())
    }
    $(this).data('currVal', myVal);

});

デモhttp://jsfiddle.net/7Ssu7/8/

バージョンの編集-ソート順を維持

/* store options */
var $selects = $(".selectbox");
var $opts = $selects.first().children().clone();


$selects.change(function () {
    /*create array of all selected values*/    
    var selectedValues=$selects.map(function(){
        var val=$(this).val();
        return val !=0? val :null;
    }).get();


    $selects.not(this).each(function(){     

        var $sel=$(this), myVal=$sel.val() ||0;        
        var $options=$opts.clone().filter(function(i){
            var val=$(this).val();         
            return  val==myVal || $.inArray(val, selectedValues) ==-1;
        });
        $sel.html( $options).val( myVal)
    });  

});

デモ：http：//jsfiddle.net/8uunN/1/

于 2013-02-12T04:07:24.510 に答える