省市区级联选择器

ziblog

已于 2025-06-27 13:30:54 修改

阅读量815

点赞数 20

CC 4.0 BY-SA版权

文章标签： javascript css 前端

于 2025-06-05 17:14:26 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148454993

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市区级联选择器</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.select-group {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
select {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
background-color: white;
cursor: pointer;
}
select:disabled {
background-color: #f9f9f9;
color: #999;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #f0f8ff;
border-radius: 4px;
border-left: 4px solid #1890ff;
}
.footer {
margin-top: 30px;
text-align: center;
color: #666;
font-size: 14px;
}
a {
color: #1890ff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>省市区级联选择器</h1>

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

<div class="result" id="result">
请选择省市区查看结果...
</div>
</div>

<div class="footer">

</div>

// 初始化省份选择器
const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const districtSelect = document.getElementById('district');
const resultDiv = document.getElementById('result');

// 加载省份数据
Object.keys(regionData).forEach(province => {
const option = document.createElement('option');
option.value = province;
option.textContent = province;
provinceSelect.appendChild(option);
});

// 加载城市数据
function loadCities() {
// 重置城市和区县选择器
citySelect.innerHTML = '<option value="">-- 请选择城市 --</option>';
districtSelect.innerHTML = '<option value="">-- 请选择区县 --</option>';
districtSelect.disabled = true;

const selectedProvince = provinceSelect.value;
if (!selectedProvince) {
citySelect.disabled = true;
updateResult();
return;
}

citySelect.disabled = false;
const cities = regionData[selectedProvince];

Object.keys(cities).forEach(city => {
const option = document.createElement('option');
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
});

updateResult();
}

// 加载区县数据
function loadDistricts() {
// 重置区县选择器
districtSelect.innerHTML = '<option value="">-- 请选择区县 --</option>';

const selectedProvince = provinceSelect.value;
const selectedCity = citySelect.value;
if (!selectedProvince || !selectedCity) {
districtSelect.disabled = true;
updateResult();
return;
}

districtSelect.disabled = false;
const districts = regionData[selectedProvince][selectedCity];

districts.forEach(district => {
const option = document.createElement('option');
option.value = district;
option.textContent = district;
districtSelect.appendChild(option);
});

updateResult();
}

// 更新结果显示
function updateResult() {
const province = provinceSelect.value || '未选择';
const city = citySelect.value || '未选择';
const district = districtSelect.value || '未选择';

resultDiv.innerHTML = `
<strong>当前选择：</strong><br>
省份：${province}<br>
城市：${city}<br>
区县：${district}
`;
}

// 为区县选择器添加事件监听
districtSelect.addEventListener('change', updateResult);
</script>
</body>
</html>