互斥选择框

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>