如何在具有相同选项的其他选择中禁用、隐藏或删除所选选项？

Question

我正在编写一个包含 4 个<select>元素的表单。 它们都有相同的选项，我想禁用、隐藏或删除具有相同选项的其他<select>元素中的一个<select>中的<select>选项，以防止用户在多个<select> <select>中选择相同的选项<select>元素。

没有 jQuery，请只有普通的 JavaScript。

如果可能，我希望第一个选项始终显示在所有<select>元素中：

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

这是一个<select>的 HTML：

<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>

这是我的 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}`;

Answer 1

在您的change事件侦听器中，您可以从组中的所有<select>元素中获取当前的一组选定值，然后循环遍历每个元素的选项以禁用当前在组中其他地方选择的选项以及重新启用任何先前选择但此后已更改的选项。 您可以通过在禁用/启用选项之前检查值来避免禁用每个选择中的第一个“标签”选项。

您可以使用相同的方法来隐藏或删除选项，请记住，尝试隐藏<option>元素时存在一些浏览器兼容性问题，并且如果要删除，则需要一些额外的代码来存储完整的选项列表并恢复它们。

 const selects = document.querySelectorAll('.select-group'); selects.forEach((elem) => { elem.addEventListener('change', (event) => { let values = Array.from(selects).map(select => select.value); for (let select of selects) { select.querySelectorAll('option').forEach((option) => { let 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>

Answer 2

非常感谢你的帮助！ 我添加了一个小的“if”来修复我的错误，它完美地工作（直到下一个错误 ^^）：

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

Answer 3

或者我可以：

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

开始时的另一个困难：学习编写简单的代码^^z