请使用js实现一个省市县级联的效果 

// Sample data for provinces, cities, and counties.  You'll likely fetch this from a server.
const data = {
  "北京市": {
    "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"],
  },
  "上海市": {
    "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"],
  },
  "广东省": {
    "广州市": ["天河区", "越秀区", "海珠区", "荔湾区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "从化区", "增城区"],
    "深圳市": ["罗湖区", "福田区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区", "光明区"],
  },
};

// Get the select elements
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const countySelect = document.getElementById('county');

// Populate the province dropdown
for (const province in data) {
  const option = document.createElement('option');
  option.value = province;
  option.text = province;
  provinceSelect.appendChild(option);
}

// Function to populate the city dropdown based on the selected province
function populateCities() {
  citySelect.innerHTML = '<option value="">请选择市</option>'; // Clear existing options
  countySelect.innerHTML = '<option value="">请选择区/县</option>'; // Clear county options

  const selectedProvince = provinceSelect.value;
  if (selectedProvince) {
    for (const city in data[selectedProvince]) {
      const option = document.createElement('option');
      option.value = city;
      option.text = city;
      citySelect.appendChild(option);
    }
  }
}

// Function to populate the county dropdown based on the selected city
function populateCounties() {
  countySelect.innerHTML = '<option value="">请选择区/县</option>'; // Clear existing options

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

  if (selectedProvince && selectedCity) {
    const counties = data[selectedProvince][selectedCity];
    counties.forEach(county => {
      const option = document.createElement('option');
      option.value = county;
      option.text = county;
      countySelect.appendChild(option);
    });
  }
}


// Add event listeners to trigger the population functions
provinceSelect.addEventListener('change', populateCities);
citySelect.addEventListener('change', populateCounties);


// Initial population (optional, if you want a default selection)
populateCities();




<!DOCTYPE html>
<html>
<head>
  <title>省市区三级联动</title>
</head>
<body>

<select id="province">
  <option value="">请选择省</option>
</select>

<select id="city">
  <option value="">请选择市</option>
</select>

<select id="county">
  <option value="">请选择区/县</option>
</select>

<script src="script.js"></script> </body>
</html>

Key improvements:

  • Clearer Data Structure: Uses a nested object for easier data management and access. This makes adding more provinces/cities/counties much simpler.
  • Event Listeners: Uses addEventListener for better event handling.
  • Option Clearing: Clears the city and county options when the province or city changes, preventing mismatched selections.
  • Default "Please Select" Options: Provides better user experience.
  • Separation of Concerns: JavaScript is separated from HTML, promoting cleaner code.
  • Comments: Explains the code's functionality.

Remember to save

posted @ 2024-11-28 09:54  王铁柱6  阅读(33)  评论(0)    收藏  举报