Как отключить, скрыть или удалить выбранный параметр в других вариантах с такими же параметрами?

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) => {
    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 (value && value !== select.value && values.includes(value) && value !== "") {
option.disabled = true;            
} 

Еще одна трудность, когда вы начинаете: учитесь писать простой код ^^ z

Answer 3

Большое спасибо за вашу помощь! Я добавил небольшое «если», чтобы исправить мою ошибку, и она отлично работает (до следующей ошибки ^^):

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