相互に排他的な選択ボックス

Question

2つの選択ボックスがあります。 1つの選択ボックスを変更すると、他の選択ボックスのデフォルト値はSelect a value、つまりval()==0になります。その逆も同様です。一度に1つの選択ボックスに値を選択する必要があります。これはどうすればいいですか？私は以下のコードを試しましたが、うまくいきません。

$("#select_one").change(function() { 
    if ('#select_two'.val() != 0) { 
    $('#select_two').val(0); 
    } 
}); 

Answer 1

これは、次の例のような2つの単純な変更イベントを使用して行うことができます。

あなたは@Rory McCrossan回答が示すように、共通のクラスを使用することができますつのイベントを使用したい場合はそうで

..このことができます

希望。

$("#select_one").change(function() { 
 
    $('#select_two').val(0) 
 
}); 
 

 
$("#select_two").change(function() { 
 
    $('#select_one').val(0) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="select_one"> 
 
    <option value="0">Default</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
<br> 
 
<select id="select_two"> 
 
    <option value="0">Default</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select>

Answer 2

これを行う最も簡単な方法は、selectの両方に共通するクラスを置くことであろう。その後、jQueryの中でそのクラスを選択して、このような何かを値をリセットする前に、現在の要素を除外するためにnot()を使用することができます。

$('.select').change(function() { 
 
    $('.select').not(this).val(0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select-one" class="select"> 
 
    <option value="0">Please select</option> 
 
    <option>Foo</option> 
 
    <option>Bar</option> 
 
    <option>Fizz</option> 
 
    <option>Buzz</option> 
 
</select> 
 

 
<select id="select-two" class="select"> 
 
    <option value="0">Please select</option> 
 
    <option>Foo</option> 
 
    <option>Bar</option> 
 
    <option>Fizz</option> 
 
    <option>Buzz</option> 
 
</select>

Answer 3

あなたが0にのselectedIndexを設定することがあります。

$('select[id^="select_"]').on('change', function(e) { 
 
    $('select[id^="select_"]').not(this).prop('selectedIndex', 0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<select id="select_one"> 
 
    <option value="volvo">1</option> 
 
    <option value="saab">2</option> 
 
    <option value="mercedes">3</option> 
 
    <option value="audi">4</option> 
 
</select> 
 
<select id="select_two"> 
 
    <option value="volvo">11</option> 
 
    <option value="saab">22</option> 
 
    <option value="mercedes">33</option> 
 
    <option value="audi">44</option> 
 
</select>