更改 Javascript 中组合框的值

Question

我有一个关于 Javascipt DOM 操作的问题。我写了一个包含两个组合框的 HTML 页面。第一个组合框包含一个县列表。第二个组合框包含第一个组合框中所选县内的城市列表。而且我不知道接下来该怎么做：只要第一个组合框中的值发生变化，第二个组合框就会相应更新。如果有人能帮助我，我将不胜感激，我是 JS 的初学者。谢谢！

Answer 1

其中一种解决方案如下，如果您能提供示例源代码，我们可以提供更好的解决方案。

var data = [
  { country: 'A',  cities: ['A - 1', 'A - 2', 'A - 3']},
  { country: 'B',  cities: ['B - 1', 'B - 2', 'B - 3']},
  { country: 'C',  cities: ['C - 1', 'C - 2', 'C - 3']}
]
// Need to modify logic based on the data format.
const getCities = function(selectedCountry) {
  const target = data.find(d => d.country === selectedCountry);
  return target ? target.cities : [];
}

const changeCities = function (cities) {
  let html = '<option value="-">Cities</option>'
  for (let i in cities) {
    html += '<option value="' + cities[i] + '">' + cities[i] + '</option>'
  }
  document.querySelector('#cities').innerHTML = html;
}

document.querySelector('#countries').addEventListener('change', (event) => {
  const cities = getCities(event.target.value);
  changeCities(cities);
});

<select id="countries">
  <option value="-">Countries</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<select id="cities">
  <option value="-">Cities</option>
</select>

更改 Javascript 中组合框的值

Changing values of a combobox in Javascript

html

javascript

combobox