Как при выборе в одном select менять option в другом select?

Question

[GoodPirojok]

Как связать два поля селект?

<select class="first">
  <option value="organicfood">organic food</option>
  <option value="fastfood">fast food</option>
  <option value="milkfood">milk food</option>
</select>

<select class="second">
  <option value="yogurt">yogurt</option>
  <option value="kefir">kefir</option>
  <option value="milk">milk</option>
  <option value="milkshake">milk shake</option>
</select>

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

Answer 1

[0xD34F]

<select id="country"></select>
<select id="city"></select>

const setOptions = (el, data) =>
  el.innerHTML = data
    .map(n => `<option>${n}</option>`)
    .join('');


const countries = [
  { name: 'Германия', cities: [ 'Берлин', 'Бонн', 'Мюнхен' ] },
  { name: 'Франция', cities: [ 'Париж', 'Лион', 'Марсель' ] },
  { name: 'Италия', cities: [ 'Рим', 'Неаполь', 'Милан' ] },
];


const country = document.querySelector('#country');
const city = document.querySelector('#city');


setOptions(country, countries.map(n => n.name));

country.addEventListener('change', function() {
  setOptions(city, countries.find(n => n.name === this.value).cities);
});

country.dispatchEvent(new Event('change'));

https://jsfiddle.net/ky4qbt8a/

Comments

[GoodPirojok]

Благодарю