Disable Multiple Specific Options in Select Lists that have same class name

Question

On my create form, I have 3 select lists that all have the same values. However, the same option cannot be selected for more than one select. So, if I select option one in the first select.. then I shouldn't be able to select that option in the other two.

I almost have it, but I'm running into an issue where if I select an option then the disabling works for the other two, but as soon as I select an option for the 2nd select, then the option that I selected in the first select becomes active again for the options in the third select.

Here is what I have:

HTML

<select id="Person-One-Select" class="person-select">
  <option value="">-- Select Person One --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>

<select id="Person-Two-Select" class="person-select">
  <option value="">-- Select Person Two --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>

<select id="Person-Three-Select" class="person-select">
  <option value="">-- Select Person Three --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>

jQuery

$(document).ready(function() {

// Get value of Person Select on change
$(".person-select").change(function() {

    // reset all value to be active
    $(".person-select option").prop("disabled", false);

    // get value
    var selectedPerson = $(this).val();

    // look for value in 2nd and 3rd selects and disable them
    if (selectedPerson !== "") {
        $(".person-select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
    }

});


});

I have a JSFiddle to show a working example.

Answer 1

Your problem is this line:

    $(".person-select option").prop("disabled", false);

It is undoing previously-disabled options when you select from the next drop down. Then, you disable only the options with the name value in the selected drop down, effectively undoing previous drop-down selection disabling.

What you should do is check ALL of the drop downs when one is clicked, undo disable on all, and then re-disable all options based on currently-selected names from all drop downs. So this:

    // Get value of Person Select on change
$(".person-select").change(function() {

    //Select all drop downs
    var all_selects = $(".person-select");
    $(".person-select option").prop("disabled", false); //Activate all, but we will redisable appropriate ones next.

    //Recurse. Look at each drop down, and then compare against all drop downs that exist.
    for(var x = 0; x < all_selects.length; x++) {

        //Get selected name from each drop down, and then compare it against all drop downs, so that we can disable an option with the same value in other dropdowns.
        var currentSelection = $(all_selects[x]).prop("id");
        for(var y = 0; y < all_selects.length; y++) {

           //Ignore self. We do not want to disable the option with the above currentSelection value within that dropwdown, as it will prevent form submission of the selected value.
           if(currentSelection == $(all_selects[y]).prop("id")) continue;

           //Now, disable duplicate options in OTHER drop downs.
           var selectedPerson = $(all_selects[x]).val();
           if (selectedPerson !== "") {

               $(all_selects[y]).find("option[value='" + selectedPerson + "']").attr("disabled","disabled");

           }

        }

    }

});

Answer 2

try this for your jQuery:

$(document).ready(function() {

// Get value of Person Select on change
$(".person-select").change(function() {

    var slctID = $(this).attr('id');

    // reset all value to be active
    $(".person-select option").prop("disabled", false);

    // get value
    var selectedPerson = $(this).val();

    switch(slctID) {
    case "Person-One-Select":
        if (selectedPerson !== "") {
        $("#Person-Two-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        $("#Person-Three-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        }
        break;
    case "Person-Two-Select":
        if (selectedPerson !== "") {
        $("#Person-One-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        $("#Person-Three-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        }
        break;
    case "Person-Three-Select":
        if (selectedPerson !== "") {
        $("#Person-One-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        $("#Person-Two-Select option[value='" + selectedPerson + "']").attr("disabled", "disabled");
        }
        break;
    }

});

});

Answer 3

Here we keep track of a currently chosen values Array and reference all the options against it and if the value of the options match then they are disabled (negating the relative selects' chosen option.)

 const selectBoxes = document.querySelectorAll('select.person-select') let chosen = [] const _disableRelated = () => { const options = [] selectBoxes .forEach(select => { const unselectedOpts = [...select.querySelectorAll('option')].filter(o => o.value !== select.value) options.push(...unselectedOpts) }) options.forEach(option => { const action = chosen.indexOf(option.value) !== -1 ? 'setAttribute' : 'removeAttribute' option[action]('disabled', null) }) } const _handleChange = e => { const { value } = e.target chosen.length = 0 selectBoxes.forEach(({ value }) => value ? chosen.push(value) : null) _disableRelated() } selectBoxes.forEach(select => select.addEventListener('change', _handleChange)) 

 <select id="Person-One-Select" class="person-select"> <option value="">-- Select Person One --</option> <option value="John Doe">John Doe</option> <option value="Jane Doe">Jane Doe</option> <option value="Babe Ruth">Babe Ruth</option> <option value="Ted Williams">Ted Williams</option> <option value="Pete Rose">Pete Rose</option> </select> <select id="Person-Two-Select" class="person-select"> <option value="">-- Select Person Two --</option> <option value="John Doe">John Doe</option> <option value="Jane Doe">Jane Doe</option> <option value="Babe Ruth">Babe Ruth</option> <option value="Ted Williams">Ted Williams</option> <option value="Pete Rose">Pete Rose</option> </select> <select id="Person-Three-Select" class="person-select"> <option value="">-- Select Person Three --</option> <option value="John Doe">John Doe</option> <option value="Jane Doe">Jane Doe</option> <option value="Babe Ruth">Babe Ruth</option> <option value="Ted Williams">Ted Williams</option> <option value="Pete Rose">Pete Rose</option> </select>