CODEWITHSUNDEEP
javascriptjquery
user747291
user747291

Reputation: 821

Mutually exclusive select boxes

I have 2 select boxes. On change of one select box, I want the other select box to be defaulted to Select a value, ie val()==0, and vice versa. Only one select box should have a value selected at a time. How do I do this? I tried the code below but it does not work.

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

Upvotes: 1

Views: 878

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

That could be done using two simple change events, like the following example.

Else if you want to use one event you could use a common class as @Rory McCrossan answer shows..

Hope this helps.

$("#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>

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

You may set the selectedIndex to 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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The simplest way to do this would be to place a common class on both the select. You can then select that class in jQuery and use not() to exclude the current element before resetting the value, something like this:

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

Upvotes: 1

Related Questions