如何根据其他下拉列表中的选定值填充其他下拉列表中的值

// HTML代码
<select id="citySelect" onchange="updateAreaOptions()">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

<select id="areaSelect">
  <!-- 根据选定的城市填充对应的区域 -->
</select>

// JavaScript代码
function updateAreaOptions() {
  var citySelect = document.getElementById("citySelect");
  var areaSelect = document.getElementById("areaSelect");
  var selectedCity = citySelect.value;

  // 清空区域下拉列表
  areaSelect.innerHTML = "";

  // 根据选定的城市填充对应的区域
  if (selectedCity === "beijing") {
    var areas = ["东城区", "西城区", "朝阳区", "海淀区"];
    for (var i = 0; i < areas.length; i++) {
      var option = document.createElement("option");
      option.text = areas[i];
      areaSelect.add(option);
    }
  } else if (selectedCity === "shanghai") {
    var areas = ["黄浦区", "徐汇区", "静安区", "杨浦区"];
    for (var i = 0; i < areas.length; i++) {
      var option = document.createElement("option");
      option.text = areas[i];
      areaSelect.add(option);
    }
  } else if (selectedCity === "guangzhou") {
    var areas = ["天河区", "越秀区", "荔湾区", "海珠区"];
    for (var i = 0; i < areas.length; i++) {
      var option = document.createElement("option");
      option.text = areas[i];
      areaSelect.add(option);
    }
  }
}