I have 3 select statements that each share the same 5 options.

How can i make sure that when an option is picked in one of the selects, it won't appear in any of the other?

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

I have 3 select statements that each share the same 5 options.

How can i make sure that when an option is picked in one of the selects, it won't appear in any of the other?

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

• javascript
• jquery
• html-select

• 2 Got to try something - maybe when one is selected from one, you disable it in the others. Start with an onChange event – tymeJV Commented Jan 11, 2017 at 22:15
• I know this may not be the best solution, but to me it sounds like you are trying to mimic the functionality of checkboxes with dropdown selectors. It might be easier to use checkboxes to acplish this. – Moose Commented Jan 11, 2017 at 22:17
• I think it would be easier to just have one select with the multiple attribute. – trincot Commented Jan 11, 2017 at 22:19
• select-unique is a pure JS library for this. There's also an old jQuery version. – sshaw Commented Aug 25, 2020 at 23:59

3 Answers 3

You could use the HTML5 hidden attribute. If you need support for non-HTML5, then go for the disabled attribute instead. Note that jQuery .hide() will not work in all browsers.

$(function () {
  $('select').change(function() {
    var used = new Set;
    $('select').each(function () {
      var reset = false;
      $('option', this).each(function () {
        var hide = used.has($(this).text());
        if (hide && $(this).is(':selected')) reset = true;
        $(this).prop('hidden', hide);
      });
      if (reset) $('option:not([hidden]):first', this).prop('selected', true);  
      used.add($('option:selected', this).text());
    });
  }).trigger('change'); // run at load
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

This solution will make one less option available in the second drop-down, and two less in the third drop-down. Selecting a used option in the first drop-down will change the other drop-down selection.

Alternative

The alternative is to just use one select, and allow the user to make multiple selections, and use code to prevent selection of more than 3 items:

$('select').change(function() {
  if ($(':selected', this).length > 3) {
    $(':selected', this).slice(3).prop('selected', false);
  };
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size=5>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>

The provided options did not allow for changing your mind, once an option was gone it was gone, or it always kept every option available in one of the boxes

It seemed inelegant having options randomly change if you selected the wrong value, possibly forcing a wrong answer if you changed box 1 and box 3 just took the first available option left

I would also wele anyone who wants to make my code cleaner (It can probably be improved, but it does work

$('select').on('change', function() {
  var selectedValues = [];
  $('select').each(function() {
    var thisValue = this.value;
    if(thisValue !== '')
      selectedValues.push(thisValue);
  }).each(function() {
    $(this).find('option:not(:selected)').each(function() {
      if( $.inArray( this.value, selectedValues ) === -1 ) {
        $(this).removeAttr('hidden');
      } else {
        if(this.value !== '')
          $(this).attr('hidden', 'hidden');
      }
    });
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="" selected="selected">--choose--</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<select>
  <option value="" selected="selected">--choose--</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<select>
  <option value="" selected="selected">--choose--</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

You can start with this:

$("select").on("change",function() {
  var v = $(this).val();
    $("select").children("option").each(function() {
      if($(this).val() == v && !$(this).attr("selected")) {
        $(this).hide();
      }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option selected="selected"></option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<select>
  <option selected="selected"></option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

<select>
  <option></option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
</select>

With this you can add or remove as many options and selects as you want.

(You'll need to add something in case you want to show them again when the option is unselected using $(this).show();)