Связать 2 и более select

Question

Имеется такой код обработки select. Код взят отсюда - https://ru.stackoverflow.com/a/712289/296532. Проблема в том что выбор завазан на первом select. При попытке сделать такую же логику для второго и третьего select код начинает дублироваться. Так же при попытке сделать другой выбор оставшиеся select не сбрасываются в изначальное значение без перезагрузки страницы. Как можно переделать данное решение?

// country
function countrySelect(param1, param2) {
  console.log(param1, param2)
  const optionsMapping = {
    0: [0],
    1: [1],
    2: [2],
    3: [3],
    4: [4],
    5: [5, 6],
  };
  return function (event) {
    let value = +param1.value;
    let options = param2.options;
    let optionsLength = options.length;
    let availableOptions = optionsMapping[value];
    
    for (let i = 0; i < optionsLength; i++) {
        if(availableOptions.indexOf(+options[i].value) !== -1){
            options[i].disabled = false;
          if(+options[i].value === value || availableOptions.length === 1){
            options[i].selected = true;
          }        
        if(availableOptions[i] === 0){
            options[0].disabled = true;
        }
        } else {         
          options[i].disabled = true;
        }
    }
  };
}

let first = document.querySelector('#country');
let second = document.querySelector('#city');

first.addEventListener('change', countrySelect(first, second));

// city
function citySelect(param1, param2) {
  console.log(param1 + param2);
  const optionsMapping = {
    1: [1],
    2: [2],
    3: [3],
    4: [4],
    5: [5],
    6: [5]
  };
  return function (event) {
    let value = +param1.value;
    let options = param2.options;
    let optionsLength = options.length;
    let availableOptions = optionsMapping[value];
    
    for (let i = 0; i < optionsLength; i++) {
        if(availableOptions.indexOf(+options[i].value) !== -1){
            options[i].disabled = false;
          if(+options[i].value === value || availableOptions.length === 1){
            options[i].selected = true;
          }
        } else {         
          options[i].disabled = true;
        }
    }
  };
}

let first1 = document.querySelector('#city');
let second1 = document.querySelector('#country');

first1.addEventListener('change', citySelect(first1, second1));

<label for="country">Страна</label>
<select id="country" name="country">
  <option value="0" selected>Выберите страну</option>
  <option value="1">Россия</option>
  <option value="2">США</option>
  <option value="3">Южная Корея</option>
</select>

<label for="city">Город</label>
<select id="city" name="city">
  <option value="0" selected>Выберите город</option>
  <option value="1">Москва</option>
  <option value="1">Санкт-Петербург</option>
  <option value="2">Лос-Анжелес</option>
  <option value="2">Нью-Йорк</option>
  <option value="3">Сеул</option>
  <option value="3">Пуссан</option>
</select>        

<label for="employee">Сотрудник</label>
<select id="employee" name="employee">
  <option value="0">Выберете сотрудника</option>
  <option value="1">Иванов Иван Иванович</option>
  <option value="1">Петров Петр Петрович</option>
  <option value="2">Сергеев Сергей Сергеевич</option>
  <option value="2">Ильин Илья Ильич</option>
  <option value="2">Васильев Станислав Алексеевич</option>
  <option value="3">Васнецова Галина Сергеевна</option>
</select>

БЛОГ НА HUSL

Связать 2 и более select

Ответы (0 шт):