中国省市区三级联动选择器

ziblog

已于 2025-06-27 13:41:20 修改

阅读量491

点赞数 21

CC 4.0 BY-SA版权

文章标签：前端 javascript css

于 2025-06-03 15:02:33 首次发布

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

<!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;
}
.address-selector {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
select {
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
font-size: 16px;
flex: 1;
min-width: 0;
}
.result {
padding: 15px;
background-color: #f9f9f9;
border-radius: 4px;
border-left: 4px solid #4CAF50;
}
.loading {
text-align: center;
color: #666;
font-style: italic;
}
.note {
margin-top: 30px;
font-size: 14px;
color: #666;
text-align: center;
}
/* 广告样式 */
.ad-container {
margin: 20px 0;
padding: 10px;
background-color: #f0f0f0;
text-align: center;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>中国省市区三级联动选择器</h1>

<div class="address-selector">
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="district">
<option value="">请选择区县</option>
</select>
</div>

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


<div class="note">
本插件使用jQuery实现，数据来源于公开行政区划信息
</div>
</div>

// 城市数据
const cities = {
'11': [{code: '1101', name: '北京市'}],
'12': [{code: '1201', name: '天津市'}],
'13': [
{code: '1301', name: '石家庄市'}, {code: '1302', name: '唐山市'}, {code: '1303', name: '秦皇岛市'},
{code: '1304', name: '邯郸市'}, {code: '1305', name: '邢台市'}, {code: '1306', name: '保定市'},
{code: '1307', name: '张家口市'}, {code: '1308', name: '承德市'}, {code: '1309', name: '沧州市'},
{code: '1310', name: '廊坊市'}, {code: '1311', name: '衡水市'}
],
// 其他省份城市数据...
'31': [{code: '3101', name: '上海市'}],
'32': [
{code: '3201', name: '南京市'}, {code: '3202', name: '无锡市'}, {code: '3203', name: '徐州市'},
{code: '3204', name: '常州市'}, {code: '3205', name: '苏州市'}, {code: '3206', name: '南通市'},
{code: '3207', name: '连云港市'}, {code: '3208', name: '淮安市'}, {code: '3209', name: '盐城市'},
{code: '3210', name: '扬州市'}, {code: '3211', name: '镇江市'}, {code: '3212', name: '泰州市'},
{code: '3213', name: '宿迁市'}
],
'44': [
{code: '4401', name: '广州市'}, {code: '4402', name: '韶关市'}, {code: '4403', name: '深圳市'},
{code: '4404', name: '珠海市'}, {code: '4405', name: '汕头市'}, {code: '4406', name: '佛山市'},
{code: '4407', name: '江门市'}, {code: '4408', name: '湛江市'}, {code: '4409', name: '茂名市'},
{code: '4412', name: '肇庆市'}, {code: '4413', name: '惠州市'}, {code: '4414', name: '梅州市'},
{code: '4415', name: '汕尾市'}, {code: '4416', name: '河源市'}, {code: '4417', name: '阳江市'},
{code: '4418', name: '清远市'}, {code: '4419', name: '东莞市'}, {code: '4420', name: '中山市'},
{code: '4451', name: '潮州市'}, {code: '4452', name: '揭阳市'}, {code: '4453', name: '云浮市'}
]
};

// 区县数据
const districts = {
'1101': [
{code: '110101', name: '东城区'}, {code: '110102', name: '西城区'}, {code: '110105', name: '朝阳区'},
{code: '110106', name: '丰台区'}, {code: '110107', name: '石景山区'}, {code: '110108', name: '海淀区'},
{code: '110109', name: '门头沟区'}, {code: '110111', name: '房山区'}, {code: '110112', name: '通州区'},
{code: '110113', name: '顺义区'}, {code: '110114', name: '昌平区'}, {code: '110115', name: '大兴区'},
{code: '110116', name: '怀柔区'}, {code: '110117', name: '平谷区'}, {code: '110118', name: '密云区'},
{code: '110119', name: '延庆区'}
],
'3101': [
{code: '310101', name: '黄浦区'}, {code: '310104', name: '徐汇区'}, {code: '310105', name: '长宁区'},
{code: '310106', name: '静安区'}, {code: '310107', name: '普陀区'}, {code: '310109', name: '虹口区'},
{code: '310110', name: '杨浦区'}, {code: '310112', name: '闵行区'}, {code: '310113', name: '宝山区'},
{code: '310114', name: '嘉定区'}, {code: '310115', name: '浦东新区'}, {code: '310116', name: '金山区'},
{code: '310117', name: '松江区'}, {code: '310118', name: '青浦区'}, {code: '310120', name: '奉贤区'},
{code: '310151', name: '崇明区'}
],
'4401': [
{code: '440103', name: '荔湾区'}, {code: '440104', name: '越秀区'}, {code: '440105', name: '海珠区'},
{code: '440106', name: '天河区'}, {code: '440111', name: '白云区'}, {code: '440112', name: '黄埔区'},
{code: '440113', name: '番禺区'}, {code: '440114', name: '花都区'}, {code: '440115', name: '南沙区'},
{code: '440117', name: '从化区'}, {code: '440118', name: '增城区'}
],
'4403': [
{code: '440303', name: '罗湖区'}, {code: '440304', name: '福田区'}, {code: '440305', name: '南山区'},
{code: '440306', name: '宝安区'}, {code: '440307', name: '龙岗区'}, {code: '440308', name: '盐田区'},
{code: '440309', name: '龙华区'}, {code: '440310', name: '坪山区'}, {code: '440311', name: '光明区'}
]
};

// 初始化省份下拉框
function initProvinces() {
const $province = $('#province');
provinces.forEach(province => {
$province.append(`<option value="${province.code}">${province.name}</option>`);
});
}

// 加载城市数据
function loadCities(provinceCode) {
const $city = $('#city');
$city.empty().append('<option value="">请选择城市</option>');
$('#district').empty().append('<option value="">请选择区县</option>');

if (!provinceCode) return;

const cityList = cities[provinceCode] || [];
cityList.forEach(city => {
$city.append(`<option value="${city.code}">${city.name}</option>`);
});
}

// 加载区县数据
function loadDistricts(cityCode) {
const $district = $('#district');
$district.empty().append('<option value="">请选择区县</option>');

if (!cityCode) return;

const districtList = districts[cityCode] || [];
districtList.forEach(district => {
$district.append(`<option value="${district.code}">${district.name}</option>`);
});
}

// 更新结果显示
function updateResult() {
const provinceCode = $('#province').val();
const cityCode = $('#city').val();
const districtCode = $('#district').val();

if (!provinceCode) {
$('#address-result').text('请选择省市区查看结果');
return;
}

const provinceName = $('#province option:selected').text();
const cityName = $('#city option:selected').text();
const districtName = $('#district option:selected').text();

let result = `您选择的地址是：${provinceName}`;

if (cityName) result += ` ${cityName}`;
if (districtName) result += ` ${districtName}`;

$('#address-result').text(result);
}

// 初始化
initProvinces();

// 省份变化事件
$('#province').change(function() {
loadCities($(this).val());
updateResult();
});

// 城市变化事件
$('#city').change(function() {
loadDistricts($(this).val());
updateResult();
});

// 区县变化事件
$('#district').change(updateResult);
});
</script>
</body>
</html>