Создание зависимых списков select

Question

Всем доброго дня!
У меня есть задача сделать зависимые select, соответственно чтоб от выбора в первом менялись значения во втором и третьем (с чем я с горем пополам справился показывая лишь нужные option), но также нужно чтоб от одновременного выбора в первом и втором select менялся список выбора в третьем (например чтоб при выборе option 1 и option 3 в третьем select выбирался лишь option 10) и этого я сделать не смог. Прошу помочь

const first = document.querySelector('#first');
const second = document.querySelector('#second');
const third = document.querySelector('#third');

const showOptions = {
  1: ['3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  2: ['3', '13', '14', '15'],
  4: ['10'],
};
first.addEventListener('change', function() {
  const toShow = showOptions[this.value];
  [...second.options].forEach(n => n.hidden = +n.value && toShow && !toShow.includes(n.value));
  [...third.options].forEach(n => n.hidden = +n.value && toShow && !toShow.includes(n.value));
});

<select id="first" size="1" name="select1">
  <option value="0" disabled selected>Выберите товар</option>
  <option value="1">Шпон</option>
  <option value="2">Ламель</option>
</select>
<select id="second" size="1" name="select2">
  <option value="0" disabled selected>Порода дерева</option>
  <option value="3">Дуб</option>
  <option value="4">Бук</option>
  <option value="5">Ясень</option>
  <option value="6">Береза</option>
  <option value="7">Ольха</option>
  <option value="8">Тополь</option>
  <option value="9">Кап Тополя</option>
</select>
<select id="third" size="1" name="select3">
  <option value="0" disabled selected>Сорт</option>
  <option value="10">A</option>
  <option value="11">АВ</option>
  <option value="12">Ретро</option>
  <option value="13">Селект</option>
  <option value="14">Натур</option>
  <option value="15">Рустик</option>
</select>

Answer 1

Предлагаю такой алгоритм, если, конечно, можно всё делать с помощью JS:

const products = [{
  id: 1,
  value: 'Шпон'
}, {
  id: 2,
  value: 'Ламель'
}];

const woodSpecies = [{
  id: 3,
  value: 'Дуб',
  belongsTo: {
    productsId: new Set([1, 2])
  }
}, {
  id: 4,
  value: 'Бук',
  belongsTo: {
    productsId: new Set([1])
  }
}, {
  id: 5,
  value: 'Ясень',
  belongsTo: {
    productsId: new Set([1])
  }
}, {
  id: 6,
  value: 'Береза',
  belongsTo: {
    productsId: new Set([1])
  }
}, {
  id: 7,
  value: 'Ольха',
  belongsTo: {
    productsId: new Set([1])
  }
}, {
  id: 8,
  value: 'Тополь',
  belongsTo: {
    productsId: new Set([1])
  }
}, {
  id: 9,
  value: 'Кап Тополя',
  belongsTo: {
    productsId: new Set([1])
  }
}];

const sorts = [{
  id: 10,
  value: 'A',
  belongsTo: {
    productsId: new Set([1]),
    woodsId: new Set([3, 4, 5, 6, 7, 8, 9])
  }
}, {
  id: 11,
  value: 'АВ',
  belongsTo: {
    productsId: new Set([1]),
    woodsId: new Set([3, 9])
  }
}, {
  id: 12,
  value: 'Ретро',
  belongsTo: {
    productsId: new Set([1]),
    woodsId: new Set([3, 9])
  }
}, {
  id: 13,
  value: 'Селект',
  belongsTo: {
    productsId: new Set([2]),
    woodsId: new Set([3])
  }
}, {
  id: 14,
  value: 'Натур',
  belongsTo: {
    productsId: new Set([2]),
    woodsId: new Set([3])
  }
}, {
  id: 15,
  value: 'Рустик',
  belongsTo: {
    productsId: new Set([2]),
    woodsId: new Set([3])
  }
}];

const productsSelect = document.querySelector('#products');
const woodSpeciesSelect = document.querySelector('#woodSpecies');
const sortsSelect = document.querySelector('#sorts');

const createOption = (value, text) => {
  const option = document.createElement('option');

  option.value = value;
  option.text = text;
  
  return option;
}

const show = (el) => el.style.display = 'block';
const hide = (el) => el.style.display = 'none';

products.forEach(product => productsSelect.add(createOption(product.id, product.value)));
woodSpecies.forEach(woodSpecie => woodSpeciesSelect.add(createOption(woodSpecie.id, woodSpecie.value)));
sorts.forEach(sort => sortsSelect.add(createOption(sort.id, sort.value)));

const productsSelectOptions = [...productsSelect.options].splice(1);
const woodSpeciesSelectOptions = [...woodSpeciesSelect.options].splice(1);
const sortsSelectOptions = [...sortsSelect.options].splice(1);

const filterSelectsOptions = () => {
  const selectedProductIndex = productsSelect.selectedIndex;
  
  if (selectedProductIndex === 0) {
    woodSpeciesSelectOptions.forEach(option => hide(option));
    sortsSelectOptions.forEach(option => hide(option));
    
    woodSpeciesSelect.selectedIndex = 0;
    sortsSelect.selectedIndex = 0;
    
    return;
  }
  
  woodSpeciesSelectOptions.forEach((option, index) => {
    if(woodSpecies[index].belongsTo.productsId.has(products[selectedProductIndex - 1].id)) {
      show(option);
      
      return;
    }
    
    hide(option);
  });
  
  const selectedWoodSpecieIndex = woodSpeciesSelect.selectedIndex;
  
  if (selectedWoodSpecieIndex === 0) {
    sortsSelectOptions.forEach(option => hide(option));
    
    sortsSelect.selectedIndex = 0;
    
    return;
  }
  
  sortsSelectOptions.forEach((option, index) => {
    const belongsTo = sorts[index].belongsTo;
    if(
      belongsTo.productsId.has(products[selectedProductIndex - 1].id) &&
      belongsTo.woodsId.has(woodSpecies[selectedWoodSpecieIndex - 1].id)
    ) {
      show(option);
      
      return;
    }
    
    hide(option);
  });
}

filterSelectsOptions();

productsSelect.onchange = () => {
  woodSpeciesSelect.selectedIndex = 0;
  filterSelectsOptions();
};

woodSpeciesSelect.onchange = () => {
  sortsSelect.selectedIndex = 0;
  filterSelectsOptions();
};

<select id="products" size="1" name="select1">
  <option value="0" disabled selected>Выберите товар</option>
</select>
<select id="woodSpecies" size="1" name="select2">
  <option value="0" disabled selected>Порода дерева</option>
</select>
<select id="sorts" size="1" name="select3">
  <option value="0" disabled selected>Сорт</option>
</select>

Можете легко настроить зависимости между компонентами, добавляя/удаляя нужные id в нужные поля belongsTo

БЛОГ НА HUSL

Создание зависимых списков select

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