multiple select boxes with same options - require

Question

I have a form with 3 select boxes. Each select box has the same options. I want to require that you have to select a different option for each select box. For example, let's say the options are "cat", "dog" and "bird". If someone selects "bird" in the first select box, I want to disable or hide that option from the other two boxes. If they change their selection, then "bird" will be enabled or unhidden again.

<select id="box1">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

<select id="box2">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

<select id="box3">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

I assume I can do this with jquery onchange but I'm not sure how to require the unique selection across different select boxes.

$('select').on('change', function() {
    // If option is selected, disable it in all other select boxes. If option is deselected, reenable it in all other select boxes.
})

Thanks for your help!

Answer 1

1) Top To Bottom Priority Approach

The flow must be top to bottom. This also means when ever the user changes the dropdown value all the next dropdown's which come after it must be reset. Having said this, here is my code snippet.

HandleDropdowns($('#box1'));  //initially call this function to handle the dropdowns by passing the first dropdown as parameter
 
$('select').on('change', function() {
  HandleDropdowns($(this)); // handle all dropdowns on any change event.
});

function HandleDropdowns(element) {      
  var $element = element;
  var value = $element.val();

  $element.nextAll().val('');  //using nextAll lets reset all the following dropdowns
  $element.nextAll().attr('disabled', 'disabled'); //disable all the following dropdowns.
  HandleOptions(); // call this function to toggle the options 

  if (value.length) {
    $element.next().removeAttr('disabled'); // only if this dropdown has some selection enable the next dropdown.
  }
}

function HandleOptions() {
  $('option').removeAttr('disabled'); //reset all the options to be available
  $.each($('select'), function() { //loop from top to bottom and disable the options one by one.
    var value = $(this).val();
    if (value.length) {
      $(this).nextAll().find('option[value="' + value + '"]').attr('disabled', 'disabled');
    }
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

<select id="box2">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

<select id="box3">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

---

2) All Select Box With Same Priority Approach

In this approach when ever the user selects a value we check if any other dropdown has the same value, If yes reset it else do nothing. Below is a working sample.

$('select').on('change', function() {
  HandleDropdowns($(this));
});

function HandleDropdowns(element) {
  var $element = element;
  var value = $element.val();
  
  $.each($('select').not($element), function() { //loop all remaining select elements
    var subValue = $(this).val();
    if (subValue === value) { // if value is same reset
      $(this).val('');
      console.log('resetting ' + $(this).attr('id')); // demo purpose
    }
  });  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

<select id="box2">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

<select id="box3">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

Answer 2

You can use onchange listener and evaluate the results simultaneously. Also add an reset button cause once three get selected, it becomes bottle neck case.

The working code is given below

function changeSelect(elements) {
  var values = {};
  elements.forEach(function(item){
    values[item.id] = item.value;
  });
  elements.forEach(function(item){
    for(var i = 0; i < item.children.length; i++) {
      for(ids in values) {
        if(item.id != ids && item.children[i].value == values[ids]) {
          item.children[i].style.display = 'none';
        }
      }
    }
  });
}

function resetSelection(elements) {
  elements.forEach(function(item){
    item.value = '';
    for(var i = 0; i < item.children.length; i++) {
      item.children[i].style.display = '';
    }
  });
}

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var boxArray = [box1, box2, box3];
boxArray.forEach(function(item){
  item.addEventListener('change', changeSelect.bind(undefined,boxArray));
});
document.getElementById('reset').addEventListener('click', resetSelection.bind(undefined,boxArray));

<select id="box1">
    <option value="">Select An Option</option>
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

<select id="box2">
    <option value="">Select An Option</option>
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

<select id="box3">
    <option value="">Select An Option</option>
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>
<button id="reset">Reset</button>

Answer 3

Try this

$('select').on('change', function () {
  $("select").find("option").removeAttr("disabled");
  $("select").not(this).find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
});