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

Question

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

没有jQuery，请只提供纯JavaScript。

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

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

这是其中的HTML <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>

这是我的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) => {
    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>