javascript实现网页联动省市县

在JavaScript中实现网页联动的省市县功能，通常会用到HTML、CSS和JavaScript配合使用，特别是通过数据绑定和事件监听技术。这里是一个简单的例子：

首先，在HTML中设置下拉菜单结构：

<select id="province" onchange="loadCities()">
  <option value="">请选择省份</option>
  <!-- 省份数据 -->
</select>

<select id="city" style="display:none;">
  <option value="">请选择城市</option>
  <!-- 城市数据，隐藏显示 -->
</select>

<select id="county" style="display:none;">
  <option value="">请选择区县</option>
  <!-- 区县数据，隐藏显示 -->
</select>

然后，在JavaScript中添加联动逻辑：

// 假设provinceData、cityData和countyData是包含省级、市级和县级数据的对象数组
let provinceData = [...];
let cityData = [...];
let countyData = {...};

function loadCities() {
  let selectedProvince = document.getElementById('province').value;
  if (selectedProvince) {
    document.getElementById('city').options.length = 0; // 清空城市选项
    document.getElementById('county').style.display = 'none'; // 隐藏区县

    // 根据选择的省份加载对应的城市
    cityData.forEach(city => {
      if (city.provinceId === selectedProvince.id) { // 假设省级数据有id属性
        document.getElementById('city').add(new Option(city.name, city.id));
      }
    });

    // 如果有匹配的城市，则显示城市下拉框
    if (document.getElementById('city').options.length > 0) {
      document.getElementById('city').style.display = '';
    } else {
      document.getElementById('county').style.display = 'none';
    }
  }
}

window.onload = function() {
  // 初始化省级数据
  provinceData.forEach(province => {
    new Option(province.name, province.id);
  });
}

在这个示例中，当用户改变省选定时，`loadCities()`函数会被触发，动态加载和更新城市列表。如果选择了城市，再根据城市ID加载区县。