How do I disable, hide, or remove selected option in other selects with the same options?

Question

I'm writing a form with 4 <select> elements. They all have the same options and I would like to disable, hide, or remove the selected option from one <select> in the other <select> elements with the same options in order to prevent the user to select the same option in multiple <select> elements.

No jQuery, only plain JavaScript please.

If possible I would like the first option to always display in all <select> elements:

<option class="select-items" selected>Sélectionnez..</option>

Here is the HTML for one <select>:

<select class="custom-select  mb-3" id="name_typage_0">
  <option class="select-items" selected>Sélectionnez..</option>
  <option class="select-items" value="designation">Désignation</option>
  <option class="select-items" value="email">Email</option>
  <option class="select-items" value="ville">Ville</option>
  <option class="select-items" value="secteur_activite">Secteur d'activité</option>
</select>

Here is part of my JavaScript:

const custSelec = document.querySelectorAll('.custom-select');
custSelec.forEach(function(item){
   item.addEventListener('change', function(){
      if(item.options[item.selectedIndex].text == 'Sélectionnez..'){
         count = -1;
      }else{
         count = 1;
      total += count;
     compteur.textContent = ` ${total}/${custSelec.length -1}`;

You can keep the first option in another select and show/hide the current select on the click event listener of that option — A Rogue Otaku, May 13 '19 at 15:53
What would you prefer to do? 1.) Disable the other options? 2.) Hide the other options? 3.) Remove the other options? — scunliffe, May 13 '19 at 16:59
With UI/UX in mind (apparently a must now), i would say that disable would be best. But ultimately any help is fine ^^ — Florent Vicente, May 14 '19 at 07:21

benvc · Accepted Answer · 2021-09-29T18:43:36.233

In your change event listener, you can get the current set of selected values from all <select> elements in the group, and then loop through each element's options to both disable the options currently selected elsewhere in the group as well as re-enable any options that were previously selected but have since been changed. You can avoid disabling the first "label" option in each of your selects by checking the value before disabling / enabling options.

You could use this same approach to hide or remove options keeping in mind that there are some browser compatibility issues when trying to hide <option> elements and that you would need some additional code to store the complete list of options if you were going to remove and restore them.

const selects = document.querySelectorAll('.select-group');
selects.forEach((elem) => {
  elem.addEventListener('change', (event) => {
    const values = Array.from(selects).map((select) => select.value);
    for (const select of selects) {
      select.querySelectorAll('option').forEach((option) => {
        const value = option.value;
        if (value &&  value !== select.value && values.includes(value)) {
          option.disabled = true;
        } else {
          option.disabled = false;
        }
      });
    }
  });
});

<select class="select-group">
  <option value="">Select...</option> 
  <option value="first">First Value</option> 
  <option value="second">Second Value</option>
  <option value="third">Third Value</option>
</select>
<select class="select-group">
  <option value="">Select...</option> 
  <option value="first">First Value</option> 
  <option value="second">Second Value</option>
  <option value="third">Third Value</option>
</select>
<select class="select-group">
  <option value="">Select...</option> 
  <option value="first">First Value</option> 
  <option value="second">Second Value</option>
  <option value="third">Third Value</option>
</select>

Worked perfectly fine until I test it with 5 selects. I don t know why, the 4th select has a funny bug = the first option (Select...) is disabled which complicates its usability ^^z — Florent Vicente, May 14 '19 at 07:42
@FlorentVicente - the approach above should work fine regardless of the number of ` — benvc, May 14 '19 at 13:11
https://stackoverflow.com/questions/69401777/angular-prevent-selection-of-same-options-from-a-dropdown/69402025#69402025 Can you help solve this one? I am kinda confused — , Oct 01 '21 at 09:40

score 0 · Answer 2 · answered May 14 '19 at 08:05

0

Thanks a lot for your help! I added a small 'if' to fix my bug and it works perfectly (until the next bug ^^):

if(value !== ""){
option.disabled = true;
}

answered May 14 '19 at 08:05

Florent Vicente

105
1
6

2

you can use directely if(value) { option.disabled = true; } – mukesh kudi May 14 '19 at 08:08

score 0 · Answer 3 · answered May 14 '19 at 08:21

0

Or I could just :

if (value && value !== select.value && values.includes(value) && value !== "") {
option.disabled = true;            
}

Another difficulty when you begin : learn to write simple code ^^z

answered May 14 '19 at 08:21

Florent Vicente

105
1
6

1

`if (value)` and `if (value !== "")` are redundant, see [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). Also, it is great to post an answer to your own question but rather than posting multiple answers, you can always edit your first answer to include additional information. – benvc May 14 '19 at 13:15

How do I disable, hide, or remove selected option in other selects with the same options?

3 Answers3

Linked