<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>jQuery移动端三级地区联动特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.5;
padding: 15px;
}
.container {
max-width: 500px;
margin: 0 auto;
}
h1 {
font-size: 20px;
text-align: center;
margin-bottom: 20px;
color: #333;
}
.address-selector {
background-color: #fff;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.select-group {
display: flex;
margin-bottom: 15px;
}
.select-group select {
flex: 1;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
color: #333;
background-color: #fff;
appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.select-group select:not(:last-child) {
margin-right: 10px;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 4px;
font-size: 14px;
text-align: center;
}
.note {
margin-top: 20px;
font-size: 12px;
color: #999;
text-align: center;
}
.note a {
color: #06c;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery移动端三级地区联动</h1>
<div class="address-selector">
<div class="select-group">
<select id="province">
<option value="">请选择省份</option>
</select>
</div>
<div class="select-group">
<select id="city">
<option value="">请选择城市</option>
</select>
</div>
<div class="select-group">
<select id="district">
<option value="">请选择区县</option>
</select>
</div>
<div class="result" id="result">
请选择省市区
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 省份数据
var provinceData = [
{id: '1', name: '北京市'},
{id: '2', name: '上海市'},
{id: '3', name: '广东省'},
{id: '4', name: '江苏省'},
{id: '5', name: '浙江省'},
{id: '6', name: '四川省'}
];
// 城市数据
var cityData = {
'1': [
{id: '101', name: '北京市'}
],
'2': [
{id: '201', name: '上海市'}
],
'3': [
{id: '301', name: '广州市'},
{id: '302', name: '深圳市'},
{id: '303', name: '珠海市'},
{id: '304', name: '东莞市'}
],
'4': [
{id: '401', name: '南京市'},
{id: '402', name: '苏州市'},
{id: '403', name: '无锡市'},
{id: '404', name: '常州市'}
],
'5': [
{id: '501', name: '杭州市'},
{id: '502', name: '宁波市'},
{id: '503', name: '温州市'},
{id: '504', name: '嘉兴市'}
],
'6': [
{id: '601', name: '成都市'},
{id: '602', name: '绵阳市'},
{id: '603', name: '德阳市'},
{id: '604', name: '乐山市'}
]
};
// 区县数据
var districtData = {
'101': [
{id: '10101', name: '东城区'},
{id: '10102', name: '西城区'},
{id: '10103', name: '朝阳区'},
{id: '10104', name: '海淀区'}
],
'201': [
{id: '20101', name: '黄浦区'},
{id: '20102', name: '徐汇区'},
{id: '20103', name: '长宁区'},
{id: '20104', name: '静安区'}
],
'301': [
{id: '30101', name: '天河区'},
{id: '30102', name: '越秀区'},
{id: '30103', name: '海珠区'},
{id: '30104', name: '荔湾区'}
],
'302': [
{id: '30201', name: '福田区'},
{id: '30202', name: '罗湖区'},
{id: '30203', name: '南山区'},
{id: '30204', name: '宝安区'}
],
'401': [
{id: '40101', name: '玄武区'},
{id: '40102', name: '秦淮区'},
{id: '40103', name: '鼓楼区'},
{id: '40104', name: '建邺区'}
],
'402': [
{id: '40201', name: '姑苏区'},
{id: '40202', name: '虎丘区'},
{id: '40203', name: '吴中区'},
{id: '40204', name: '相城区'}
],
'501': [
{id: '50101', name: '上城区'},
{id: '50102', name: '下城区'},
{id: '50103', name: '江干区'},
{id: '50104', name: '拱墅区'}
],
'601': [
{id: '60101', name: '锦江区'},
{id: '60102', name: '青羊区'},
{id: '60103', name: '金牛区'},
{id: '60104', name: '武侯区'}
]
};
// 初始化省份下拉框
$.each(provinceData, function(i, item) {
$('#province').append('<option value="' + item.id + '">' + item.name + '</option>');
});
// 省份选择变化时
$('#province').change(function() {
var provinceId = $(this).val();
$('#city').html('<option value="">请选择城市</option>');
$('#district').html('<option value="">请选择区县</option>');
if (provinceId) {
var cities = cityData[provinceId];
$.each(cities, function(i, item) {
$('#city').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
updateResult();
});
// 城市选择变化时
$('#city').change(function() {
var cityId = $(this).val();
$('#district').html('<option value="">请选择区县</option>');
if (cityId) {
var districts = districtData[cityId];
if (districts) {
$.each(districts, function(i, item) {
$('#district').append('<option value="' + item.id + '">' + item.name + '</option>');
});
} else {
$('#district').append('<option value="">无下级区域</option>');
}
}
updateResult();
});
// 区县选择变化时
$('#district').change(function() {
updateResult();
});
// 更新结果显示
function updateResult() {
var province = $('#province option:selected').text();
var city = $('#city option:selected').text();
var district = $('#district option:selected').text();
if (province && city && district) {
$('#result').text('您选择的是: ' + province + ' - ' + city + ' - ' + district);
} else if (province && city) {
$('#result').text('您选择的是: ' + province + ' - ' + city);
} else if (province) {
$('#result').text('您选择的是: ' + province);
} else {
$('#result').text('请选择省市区');
}
}
// 移动端优化 - 点击select时增加反馈
$('select').on('focus', function() {
$(this).css('border-color', '#06c');
}).on('blur', function() {
$(this).css('border-color', '#ddd');
});
});
</script>
</body>
</html>
扫一扫
1298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
