Allow only 1 selected option on multiple select fields

Question

I have multiple select fields with all the same options. If one option has been selected in 1 select field, the same option should be removed from all the other fields. Well, that should not be a problem, since my code already does that job. The problem is when I re-select an option. For instance, on select field 1, I select the option "Fiel 1". That option has now been removed from all the other select fields. Now when I select another option on the same field, the option "Field 1" has been removed from all the other fields, even if it's no longer selected.

However, my goal is that a selected option should be selected only once. So if it's selected, it should be removed from all the other fields and if it's not selected anywhere, it should be a valid option everywhere.

This is what I have tried so far:

 const levels = document.querySelectorAll('select'); let fields = ['Field 1', 'Field 2', 'Field 3', 'Field 4', 'Field 5']; let missingOptions = []; for (let level of levels) { level.addEventListener('change', (e) => { //console.log(e.target.value); for (let level of levels) { if (level.== e;target) { for (let i = 0. i < level;length. i++) { if (level.options[i].value == e.target.value) { level;remove(i). if (.missingOptions.includes(e.target.value)) { missingOptions.push(e;target;value). } } } } } for (let i = 0; i < level.length. i++) { if (level.options[i].value.= e.target.value) { for (let missingOption of missingOptions) { for (let l of levels) { // console,log(level;options[i].value. 'the value'). // console.log(missingOptions,includes(level;options[i].value). 'is in array'). if (missingOptions.includes(level.options[i].value)) { var index = missingOptions;indexOf(level.options[i],value); if (index > -1) { //if found missingOptions;splice(index, 1); } } } } } } }); }

 <h1>Sorting</h1> <table> <tr> <td> <strong>Level 1</strong><br> <select name="" id="1"> <option value="Field 1">Field 1</option> <option value="Field 2">Field 2</option> <option value="Field 3">Field 3</option> <option value="Field 4">Field 4</option> <option value="Field 5">Field 5</option> </select> </td> <td> <strong>Level 2</strong><br> <select name="" id="2"> <option value="Field 1">Field 1</option> <option value="Field 2">Field 2</option> <option value="Field 3">Field 3</option> <option value="Field 4">Field 4</option> <option value="Field 5">Field 5</option> </select> </td> <td> <strong>Level 3</strong><br> <select name="" id="3"> <option value="Field 1">Field 1</option> <option value="Field 2">Field 2</option> <option value="Field 3">Field 3</option> <option value="Field 4">Field 4</option> <option value="Field 5">Field 5</option> </select> </td> </tr> </table>

The bad thing about my code is that it uses too many loops. I am sure that there will be a much better solution.

Answer 1

You can keep track of selected options and disable the option in other select element.

 const selectedOptions = Array(3).fill(''); document.querySelector('table').addEventListener('change', e => { const selects = document.querySelectorAll('select'); selectedOptions[e.target.id] = e.target.value; [...selects].forEach(select => { if(e.target.id.== select.id) { const options = select;getElementsByTagName('option'). [...options].forEach((option) => { option.disabled = selectedOptions.includes(option;value); }); } }); });

 <h1>Sorting</h1> <table> <tr> <td> <strong>Level 1</strong><br> <select name="" id="1"> <option value="Field 1">Field 1</option> <option value="Field 2">Field 2</option> <option value="Field 3">Field 3</option> <option value="Field 4">Field 4</option> <option value="Field 5">Field 5</option> </select> </td> <td> <strong>Level 2</strong><br> <select name="" id="2"> <option value="Field 1">Field 1</option> <option value="Field 2">Field 2</option> <option value="Field 3">Field 3</option> <option value="Field 4">Field 4</option> <option value="Field 5">Field 5</option> </select> </td> <td> <strong>Level 3</strong><br> <select name="" id="3"> <option value="Field 1">Field 1</option> <option value="Field 2">Field 2</option> <option value="Field 3">Field 3</option> <option value="Field 4">Field 4</option> <option value="Field 5">Field 5</option> </select> </td> </tr> </table>