互斥選擇框

Question

我有2個選擇框。在更改一個選擇框時，我希望另一個選擇框默認爲Select a value，即val()==0，反之亦然。一次只能選擇一個選擇框。我該怎麼做呢？我嘗試了下面的代碼，但它不起作用。

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

Answer 1

這可以使用兩個簡單的更改事件來完成，如以下示例。

不然，如果你想使用一個事件作爲@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

您可以設置的selectedIndex以0：

$('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>