选中列表框项目时，在另一个列表框中显示相关数据

<select id="countryList" onchange="updateCityList()">
  <option value="china">China</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>

<select id="cityList">
  <!-- 城市选项将在事件处理函数中动态添加 -->
</select>

function updateCityList() {
  var countryList = document.getElementById("countryList");
  var cityList = document.getElementById("cityList");
  var selectedCountry = countryList.value;
  
  // 清空城市列表
  cityList.innerHTML = "";
  
  // 根据选中的国家，添加相应的城市选项
  if (selectedCountry === "china") {
    addOption(cityList, "Beijing", "北京");
    addOption(cityList, "Shanghai", "上海");
    addOption(cityList, "Guangzhou", "广州");
  } else if (selectedCountry === "usa") {
    addOption(cityList, "New York", "纽约");
    addOption(cityList, "Los Angeles", "洛杉矶");
    addOption(cityList, "Chicago", "芝加哥");
  } else if (selectedCountry === "uk") {
    addOption(cityList, "London", "伦敦");
    addOption(cityList, "Manchester", "曼彻斯特");
    addOption(cityList, "Edinburgh", "爱丁堡");
  }
}

function addOption(selectElement, value, text) {
  var option = document.createElement("option");
  option.value = value;
  option.text = text;
  selectElement.add(option);
}