0

I have 2 select menus with matching options e.g 

<select id="select-one">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<select id="select-two">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

What I need to do inside the change function is if an option is selected from either menu, hide/remove the matching option from the other list. I need to show it again when a different option is selected.

I hope that's enough info but please ask if you need any more.

EDIT

Sorry I missed it out but I am using the chosen plugin

4

4 に答える 4

2 
$('#select-one').on('change', function () {
  var value = $(this).val();
  $('#select-two').children('option').each(function () {
    if ($(this).val() == value) {
      $(this).hide();
        if ($(this).is(':selected') == true) {
            if ($(this).val() == 3) {
                $(this).removeAttr('selected')
                $(this).prev().attr('selected', '')
            } else {
                $(this).removeAttr('selected')
                $(this).next().attr('selected', '')
            }
        }
    } else {
      $(this).show();
    }
  });
});

これは（テストされていない）動作するはずです。もちろん、IDを置き換えて、2番目にコピーするだけです。選択ボックスがロードされた後に実行される関数または関数に配置する必要があり$(document).ready()ます。

ああ、オプションタグを正しく閉じる必要があります</option>

JSfiddle http://jsfiddle.net/m7q3H/38/ (作品)

更新: http://jsfiddle.net/m7q3H/39/ (現在と同じ場合、他の選択ボックスで選択したオプションの値を変更します)

于 2012-08-03T10:30:12.653 に答える
2

私が個人的に最初に行うことはdata-*、他の選択の ID を含む属性を各選択に追加することです。これにより、コードをより汎用的にすることができ、ID を切り替えてほとんど複製する必要がなくなります。

<select id="select-one" data-select="select-two">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="select-two" data-select="select-one">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

次に、jQuery コード:

$('#select-one,#select-two').chosen().change(function(e) {
    var that = this;
    var $otherSelect = $('#' + $(this).data('select'));
    $otherSelect.find('option').show().filter(function() {
       return this.value == that.value;
    }).hide();        
});

changeこれにより、イベント ハンドラーが 2 つの選択に追加されます。this最初に(変更された の)のコピーを別の変数に格納し、 に<select>渡された関数内で参照できるようにし.filter()ます。

次に、要素の属性を<select>使用して、他の要素への参照を取得します。data-select

その中のすべてのオプション要素を選択して表示し、一致する値を持つものだけにリストを絞り込み、それを非表示にします。

アップデート：

要素で選択したプラグインを<select>個別に呼び出す場合は、次のように無名関数を名前付き関数に移動することができます。

function handleChange() {
    var that = this;
    var $otherSelect = $('#' + $(this).data('select'));
    $otherSelect.find('option').show().filter(function() {
        return this.value == that.value;
    }).hide();
}

change次に、イベント ハンドラーを個別に割り当てるときに、その関数への参照を渡します。

$('#select-one').chosen().change(handleChange);
$('#select-two').chosen().change(handleChange);
于 2012-08-03T10:32:50.437 に答える
0 
$('#select-one').change(function() {
val = $(this).val();
$('#select-two option').each(function(){
$(this).css({'display' : 'block'});
if($(this).val() == val)
    $(this).css({'display': 'none'});

});

$('#select-two').change(function() {
val = $(this).val();
$('#select-one option').each(function(){
$(this).css({'display' : 'block'});
if($(this).val() == val)
    $(this).css({'display': 'none'});

}); });

于 2012-08-03T10:38:55.497 に答える
0 
$('#select-one').change(function(e){
   var val_one = $(this).val();
   $('#select-two option').each(function(){
     if($(this).val() === val_one)
        $(this).hide();
     else
        $(this).show();
   });
});
于 2012-08-03T10:32:20.670 に答える