html select元素，其选项依赖于另一个select元素

<select id="country">
  <option value="china">China</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>

<select id="city">
  <!-- 城市选项将根据国家选择动态更新 -->
</select>

document.getElementById("country").addEventListener("change", updateCities);

function updateCities() {
  var country = document.getElementById("country").value;
  var citySelect = document.getElementById("city");

  // 清除现有的城市选项
  citySelect.innerHTML = "";

  // 根据国家选择添加城市选项
  if (country === "china") {
    citySelect.appendChild(new Option("Beijing", "beijing"));
    citySelect.appendChild(new Option("Shanghai", "shanghai"));
    citySelect.appendChild(new Option("Guangzhou", "guangzhou"));
  } else if (country === "usa") {
    citySelect.appendChild(new Option("New York", "new-york"));
    citySelect.appendChild(new Option("Los Angeles", "los-angeles"));
    citySelect.appendChild(new Option("Chicago", "chicago"));
  } else if (country === "uk") {
    citySelect.appendChild(new Option("London", "london"));
    citySelect.appendChild(new Option("Manchester", "manchester"));
    citySelect.appendChild(new Option("Birmingham", "birmingham"));
  }
}