Question

我有2个选择框。在更改一个选择框时，我希望将另一个选择框默认为Select a value，即val()==0，反之亦然。只有一个选择框应该一次选择一个值。我该怎么做呢？我尝试了下面的代码，但它不起作用。

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

Answer 1

最简单的方法是在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 2

可以使用两个简单的更改事件来完成，例如以下示例。

否则，如果您想使用一个活动，您可以使用一个共同的课程@Rory McCrossan答案显示..

希望这有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

互斥选择框

3 个答案: