Question

I have 4 select inputs with the same options. and I am trying to disable any option that has been selected from one of these selects.

<select name="homeTeams[]" onchange="check()">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>

<select name="homeTeams[]" onchange="check()">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>


<select name="awayTeams[]" onchange="check()">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>

<select name="awayTeams[]" onchange="check()">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>

I am trying to disable the option that has been selected from one of these selectors. I am using jQuery to do it, but I can’t get the value based on the sender.

Ex: if the user has chosen Team1 from Select 1 the jQuery code will disable the option Team1 from Select2 and Select3 and Select4.

  function check()
  {
      var a = $('select option:selected').val();
      alert(a);
  }

it gives me the value of the first select.

any Ideas ?

Answer 1

Here’s my solution – note the ‘0’ value for “- select -” which allows any value to be deselected:

$('select').on('change', function() {
    var vals = {};
    $('select').each(function(i, el) {
        vals[el.value] = 1;
    });
    delete vals[0];

    $('option').prop('disabled', function() {
        return this.value in vals && this.value !== this.parentElement.value;
    });
});​

demo at http://jsfiddle.net/alnitak/Qq33g/