基于jQuery开发的移动端省市区三级联动选择框，通过JSON数据存储省市区层级信息，实现省份切换动态加载对应城市、城市切换动态加载对应区县，适配移动端触摸操作，采用轻量级弹窗交互设计，支持快速定位与选择，有效提升表单地址填写效率，适用于电商、物流等场景的用户地址录入需求。
jQuery移动端省市区三级联动选择框实现教程
在移动端表单设计中，省市区三级联动选择框是高频使用的组件，它能有效减少用户输入成本，提升信息填写效率，本文将详细介绍如何使用jQuery结合移动端适配技术，实现一个流畅、易用的省市区三级联动选择框。
为什么选择jQuery实现移动端三级联动？
jQuery作为轻量级JavaScript库，具有简洁的DOM操作和事件处理能力，特别适合快速开发交互组件，在移动端，jQuery能很好地兼容主流浏览器，且配合CSS可轻松实现适配不同屏幕尺寸的选择框样式，相较于原生JavaScript，jQuery能大幅减少代码量，提升开发效率,jQuery的链式操作和丰富的插件生态也为移动端开发提供了便利。
实现准备：数据与依赖
依赖库
- jQuery：建议使用3.x及以上版本，确保兼容性,并充分利用其Promise支持。
- 移动端适配CSS：可使用
normalize.css或自定义重置样式,优化移动端默认渲染。 - 可选依赖：如需增强移动端体验，可引入
fastclick.js解决移动端点击延迟问题。
省市区数据
三级联动的核心是数据结构，通常采用"省→市→区"的嵌套JSON格式：
{
"北京市": {
"北京市": ["东城区", "西城区", "朝阳区", "丰台区", "海淀区", "石景山区"]
},
"上海市": {
"上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区"]
},
"广东省": {
"广州市": ["天河区", "越秀区", "海珠区", "白云区", "黄埔区", "番禺区"],
"深圳市": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区"],
"东莞市": ["莞城区", "南城区", "东城区", "万江区", "石碣镇", "石龙镇"]
}
}
实际项目中，数据可从后端API异步获取（如根据用户IP定位默认省份），也可使用本地静态数据（如国家统计局公开数据），对于大型应用，建议采用分片加载策略,按需加载数据以提升性能。
完整实现步骤
HTML结构：移动端友好的选择框布局
移动端需确保选择框有足够的点击区域（建议高度≥44px，符合移动端触控规范），使用<select>元素结合<optgroup>实现层级结构：
<div class="address-selector">
<select id="province" class="select-item">
<option value="">请选择省份</option>
</select>
<select id="city" class="select-item" disabled>
<option value="">请选择城市</option>
</select>
<select id="district" class="select-item" disabled>
<option value="">请选择区县</option>
</select>
</div>
说明：
- 通过
disabled属性控制城市、区县选择框的初始禁用状态,避免用户误操作。 - 使用
class="select-item"统一样式,方便后续移动端适配。 - 可添加
data-placeholder属性,增强移动端提示效果。
CSS样式：适配移动端的选择框美化
移动端默认<select>样式差异较大（如iOS圆角、Android下拉箭头）,需通过CSS重置并优化：
.address-selector {
display: flex;
gap: 8px;
padding: 10px;
background: #f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.select-item {
flex: 1;
height: 44px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
padding: 0 10px;
background: white;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
transition: all 0.3s ease;
}
.select-item:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
/* 自定义下拉箭头 */
.select-item::after {
content: "▼";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #666;
pointer-events: none;
}
/* 解决iOS下select点击区域偏移 */
.select-item {
position: relative;
padding-right: 30px;
}
/* 添加loading状态 */
.select-item.loading {
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
关键点：
font-size: 16px：避免iOS在输入框聚焦时自动缩放页面。-webkit-appearance: none：重置iOS默认圆角和样式。height: 44px：符合移动端"44px最小触控区域"规范,提升点击体验。- 添加了过渡效果和焦点状态,提升交互体验。
jQuery逻辑：三级联动的核心交互
使用jQuery监听省份选择变化，动态加载对应城市；监听城市变化，动态加载对应区县,以下是完整实现：
$(function() {
// 示例数据（实际项目中可从API获取）
const addressData = {
"北京市": {
"北京市": ["东城区", "西城区", "朝阳区", "丰台区", "海淀区", "石景山区"]
},
"上海市": {
"上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区"]
},
"广东省": {
"广州市": ["天河区", "越秀区", "海珠区", "白云区", "黄埔区", "番禺区"],
"深圳市": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区"],
"东莞市": ["莞城区", "南城区", "东城区", "万江区", "石碣镇", "石龙镇"]
},
"浙江省": {
"杭州市": ["上城区", "下城区", "江干区", "拱墅区", "西湖区", "滨江区"],
"宁波市": ["海曙区", "江北区", "北仑区", "镇海区", "鄞州区", "奉化区"]
}
};
// 缓存DOM元素
const $province = $("#province");
const $city = $("#city");
const $district = $("#district");
// 初始化省份
function initProvince() {
$province.append('<option value="">请选择省份</option>');
for (const province in addressData) {
$
