js实现省份城市
实现省份城市联动选择
数据结构设计
使用嵌套对象或数组存储省份和城市数据，例如：
const provinceData = {
"广东省": ["广州市", "深圳市", "珠海市"],
"江苏省": ["南京市", "苏州市", "无锡市"],
"浙江省": ["杭州市", "宁波市", "温州市"]
};HTML结构
创建两个select元素分别用于选择省份和城市：
<select id="province"></select>
<select id="city"></select>初始化省份选项
页面加载时填充省份下拉框：
const provinceSelect = document.getElementById('province');
Object.keys(provinceData).forEach(province => {
const option = document.createElement('option');
option.value = province;
option.textContent = province;
provinceSelect.appendChild(option);
});城市联动逻辑
当省份选择变化时更新城市选项：
provinceSelect.addEventListener('change', function() {
const citySelect = document.getElementById('city');
citySelect.innerHTML = ''; // 清空现有城市选项
const selectedProvince = this.value;
if (selectedProvince) {
provinceData[selectedProvince].forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
}
});完整实现示例
document.addEventListener('DOMContentLoaded', function() {
const provinceData = {
"广东省": ["广州市", "深圳市", "珠海市"],
"江苏省": ["南京市", "苏州市", "无锡市"],
"浙江省": ["杭州市", "宁波市", "温州市"]
};
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
// 初始化省份
Object.keys(provinceData).forEach(province => {
const option = document.createElement('option');
option.value = province;
option.textContent = province;
provinceSelect.appendChild(option);
});
// 省份变更事件
provinceSelect.addEventListener('change', function() {
citySelect.innerHTML = '<option value="">--请选择城市--</option>';
const selectedProvince = this.value;
if (selectedProvince) {
provinceData[selectedProvince].forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});
}
});
// 触发初始change事件
provinceSelect.dispatchEvent(new Event('change'));
});优化建议
对于大量数据可以考虑以下优化：
- 使用AJAX异步加载数据
- 添加缓存机制
- 实现搜索功能
- 使用第三方库如jQuery或Select2增强用户体验
注意事项
- 确保DOM加载完成后再执行JavaScript代码
- 处理空选择情况
- 考虑添加默认提示选项
- 移动端适配需要考虑触摸体验
