Как манипулировать / задавать реакции на выбор выпадающего меню?

Question

Я пытаюсь отобразить второе выпадающее меню, которое зависит от реакции / выбора первого выпадающего меню. Я хочу, чтобы появилось второе раскрывающееся меню, которое зависит от выбора первого раскрывающегося меню.

Iv пытался использовать операторы if, но они не помогли мне продвинуться вперед.

    <select id="countries">
        <option id="US" value="unitedStates" > United States </option>
        <option id="CA" value="canada" > Canada </option>
    </select>

<script type="text/javascript">
    //Global variable for the Countries drop down menu
    var country = document.getElementById('countries');

</script>

Я хочу, чтобы появилось второе раскрывающееся меню со списком городов в США или Канаде, в зависимости от того, какой из них выбран.

Answer 1

Попробуйте этот код:

var cities = {
  unitedStates: ["New York", "Washington"],
  canada: ["Toronto", "Ottawa"]
}

var country = document.getElementById('countries');
var city = document.getElementById('cities');

country.onchange = () => {
    let v = cities[country.value];
    city.innerHTML = v ? v.map(c => `<option id="${c}" value="${c}">${c}</option>`) : '';
}

<select id="countries">
    <option></option>
    <option id="US" value="unitedStates" > United States </option>
    <option id="CA" value="canada" > Canada </option>
</select>
<select id="cities"></select>

Здесь мы меняем каждый параметр в секунду <input> в зависимости от выбора в первом <input>. Данные взяты из cities объекта.

---

UPD: если вам не нужно пустое значение в первом комбо

var cities = {
  "United States": ["New York", "Washington"],
  "Canada": ["Toronto", "Ottawa"]
}

var districts = {
  "New York": ["District 1", "District 2"],
  "Washington": ["District 3", "District 4"],
  "Toronto": ["District 5", "District 6"],
  "Ottawa": ["District 7", "District 8"]
}

let option = d => `<option id="${d}" value="${d}">${d}</option>`;
var country = document.getElementById('countries');
var city = document.getElementById('cities');
var district = document.getElementById('districts');

country.innerHTML = Object.keys(cities).map(option);
linkComboBoxes(country, city, cities);
linkComboBoxes(city, district, districts);

function linkComboBoxes(input1, input2, data) {
  input1.onchange = () => {
    input2.innerHTML = data[input1.value].map(option);
    input2.onchange && input2.onchange();
  }
  input1.onchange();
}

<select id="countries"></select>
<select id="cities"></select>
<select id="districts"></select>