CODEWITHSUNDEEP
javascriptjqueryhtml-select
Danc
Danc

Reputation: 167

Unique Select option values

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>

Upvotes: 1

Views: 8235

Answers (3)

MarioZ
MarioZ

Reputation: 997

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.com/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();)

Upvotes: -2

Kender
Kender

Reputation: 1254

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 welcome 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.com/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>

Upvotes: 1

trincot
trincot

Reputation: 350127

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.com/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.com/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>

Upvotes: 6

Related Questions