js城市联动菜单

基础概念： JS 城市联动菜单是一种常见的网页交互功能，通过 JavaScript 实现不同层级城市之间的联动选择。

优势：

提高用户体验：方便用户快速准确地选择目标城市，减少输入和选择的错误。
数据筛选：便于根据用户选择的城市进行相关数据的筛选和展示。

类型：

两级联动：例如省份和城市的联动。
多级联动：包含省、市、区等多级。

应用场景：

电商平台的收货地址选择。
外卖、快递等服务的配送地址选择。
招聘网站中工作地点的选择。

可能出现的问题及原因：

数据加载缓慢：可能是数据量过大或者网络请求效率低。
联动不流畅：可能是代码逻辑错误或者事件处理不当。

解决方法：

对数据进行优化，如分页加载、压缩数据等。
仔细检查代码逻辑，确保事件的正确触发和处理。

示例代码（简单的两级联动）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>城市联动</title>
</head>

<body>
  <select id="province">
    <option value="">请选择省份</option>
  </select>
  <select id="city">
    <option value="">请选择城市</option>
  </select>

  <script>
    const provinceData = {
      "广东省": ["广州市", "深圳市"],
      "湖南省": ["长沙市", "株洲市"]
    };

    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');

    // 初始化省份选项
    for (let province in provinceData) {
      let option = document.createElement('option');
      option.value = province;
      option.textContent = province;
      provinceSelect.appendChild(option);
    }

    // 省份选择变化时更新城市选项
    provinceSelect.addEventListener('change', function () {
      let selectedProvince = this.value;
      citySelect.innerHTML = '<option value="">请选择城市</option>';
      if (selectedProvince) {
        let cities = provinceData[selectedProvince];
        cities.forEach(city => {
          let option = document.createElement('option');
          option.value = city;
          option.textContent = city;
          citySelect.appendChild(option);
        });
      }
    });
  </script>
</body>

</html>

在上述示例中，当省份选择变化时，会相应地更新城市的选项。