cata cata - 1 month ago 6
HTML Question

remove option from second select if already selected first

I try to make a sport bet page. User needs to select which team is playing with the other. So I have two selects and I need to remove the same option from the second select, because one team can't play with itself.
Here's the selects:

<select class="form-control" name="team1">
<option value="Steaua Bucuresti">Steaua Bucuresti</option>
<option value="CSU Craiova">CSU Craiova</option>
<option value="FC Viitorul">FC Viitorul</option>
<option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
<option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<select class="form-control" name="team2">
<option value="Steaua Bucuresti">Steaua Bucuresti</option>
<option value="CSU Craiova">CSU Craiova</option>
<option value="FC Viitorul">FC Viitorul</option>
<option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
<option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>

Answer

Here is the Jquery solution for you:

$('select[name=team2]').on('change', function() {
   var self = this;
   $('select[name=team1]').find('option').prop('disabled', function() {
       return this.value == self.value
   });
});

$('select[name=team1]').on('change', function() {
  var self = this;
  $('select[name=team2]').find('option').prop('disabled', function() {
      return this.value == self.value
  });
});
<select class="form-control" name="team1">
  <option value="">Please select a team...</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<select class="form-control" name="team2">
  <option value="">Please select a team...</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Comments