仅允许在多个 select 字段上选择 1 个选项

Question

我有多个 select 字段具有所有相同的选项。 如果在 1 select 字段中选择了一个选项，则应从所有其他字段中删除相同的选项。 好吧，这应该不是问题，因为我的代码已经完成了这项工作。 问题是当我重新选择一个选项时。 例如，在 select 字段 1 上，我 select 选项“字段 1”。 该选项现已从所有其他 select 字段中删除。 现在，当我 select 在同一字段上的另一个选项时，选项“字段 1”已从所有其他字段中删除，即使它不再被选中。

但是，我的目标是一个选定的选项应该只选择一次。 所以如果它被选中，它应该从所有其他字段中删除，如果它没有在任何地方被选中，它应该是一个有效的选项。

这是我到目前为止所尝试的：

 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>

我的代码的坏处是它使用了太多循环。 我相信会有更好的解决方案。

Answer 1

您可以跟踪选定的选项并禁用其他select元素中的选项。

 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>