js题目11-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145680942
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .select-container {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}

select {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
  </style>
</head>

<body>
  <div class="select-container">
    <select id="province" onchange="updateCities()">
      <option value="">请选择省份</option>
    </select>
    <select id="city" onchange="updateDistricts()" disabled>
      <option value="">请选择城市</option>
    </select>
    <select id="district" disabled>
      <option value="">请选择区县</option>
    </select>
  </div>
</body>

</html>
    <script>
      // 省市区数据
const regionData = {
  "北京市": {
    "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
  },
  "上海市": {
    "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
  },
  // 可以继续添加更多省份数据
};

// 初始化省份下拉菜单
function initProvinces() {
  const provinceSelect = document.getElementById('province');
  for (const province in regionData) {
    const option = document.createElement('option');
    option.value = province;
    option.textContent = province;
    provinceSelect.appendChild(option);
  }
}

// 更新城市下拉菜单
function updateCities() {
  const provinceSelect = document.getElementById('province');
  const citySelect = document.getElementById('city');
  const districtSelect = document.getElementById('district');

  const selectedProvince = provinceSelect.value;
  citySelect.disabled = false;
  districtSelect.disabled = true;

  // 清空城市和区县下拉菜单
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  districtSelect.innerHTML = '<option value="">请选择区县</option>';

  if (selectedProvince) {
    const cities = regionData[selectedProvince];
    for (const city in cities) {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    }
  } else {
    citySelect.disabled = true;
  }
}

// 更新区县下拉菜单
function updateDistricts() {
  const provinceSelect = document.getElementById('province');
  const citySelect = document.getElementById('city');
  const districtSelect = document.getElementById('district');

  const selectedProvince = provinceSelect.value;
  const selectedCity = citySelect.value;

  districtSelect.disabled = false;
  // 清空区县下拉菜单
  districtSelect.innerHTML = '<option value="">请选择区县</option>';

  if (selectedProvince && selectedCity) {
    const districts = regionData[selectedProvince][selectedCity];
    districts.forEach(district => {
      const option = document.createElement('option');
      option.value = district;
      option.textContent = district;
      districtSelect.appendChild(option);
    });
  } else {
    districtSelect.disabled = true;
  }
}

// 页面加载完成后初始化省份下拉菜单
window.onload = function () {
  initProvinces();
};

  </script>

</body>
</html>
屏幕录制 2025-02-17 133402