- 代码最少：只包含必要的 HTML、CSS 和 jQuery 代码。
- 数据内联：为了实现“最少文件”的目标，我们将省市区数据直接写在 JavaScript 中，而不是从外部文件加载，这使得所有代码都在一个 HTML 文件里。
- 易于扩展：数据结构清晰，您可以轻松地替换成从服务器获取的数据。
最终代码 (单个 HTML 文件)
您可以直接将以下所有代码复制到一个 .html 文件中，然后用浏览器打开即可看到效果。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">jQuery 三级联动 - 最简代码</title>
<!-- 1. 引入 jQuery 库 (使用 CDN) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* 2. 添加一些基本样式，让页面更美观 */
body {
font-family: 'Microsoft YaHei', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.address-selector {
background: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
select {
width: 150px;
padding: 8px;
margin: 0 10px 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
</style>
</head>
<body>
<!-- 3. HTML 结构：三个下拉框 -->
<div class="address-selector">
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city" disabled>
<option value="">请选择城市</option>
</select>
<select id="district" disabled>
<option value="">请选择区县</option>
</select>
</div>
<script>
// 4. jQuery 代码实现联动逻辑
$(document).ready(function() {
// 省市区数据 (为简化，只列出一部分)
const addressData = [
{
name: "北京市",
cities: [
{
name: "北京市",
districts: ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区"]
}
]
},
{
name: "上海市",
cities: [
{
name: "上海市",
districts: ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区"]
}
]
},
{
name: "广东省",
cities: [
{
name: "广州市",
districts: ["天河区", "越秀区", "海珠区", "荔湾区", "白云区", "黄埔区"]
},
{
name: "深圳市",
districts: ["南山区", "福田区", "罗湖区", "宝安区", "龙岗区", "盐田区"]
},
{
name: "珠海市",
districts: ["香洲区", "斗门区", "金湾区"]
}
]
},
{
name: "江苏省",
cities: [
{
name: "南京市",
districts: ["玄武区", "秦淮区", "建邺区", "鼓楼区", "浦口区", "栖霞区"]
},
{
name: "苏州市",
districts: ["虎丘区", "吴中区", "相城区", "姑苏区", "吴江区", "昆山市"]
}
]
}
];
// 缓存 DOM 元素，提高性能
const $province = $('#province');
const $city = $('#city');
const $district = $('#district');
// --- 事件绑定 ---
// 省份改变时
$province.on('change', function() {
const selectedProvince = $(this).val();
$city.empty().append('<option value="">请选择城市</option>').prop('disabled', true);
$district.empty().append('<option value="">请选择区县</option>').prop('disabled', true);
if (selectedProvince) {
// 找到选中的省份对象
const province = addressData.find(p => p.name === selectedProvince);
if (province) {
// 填充城市下拉框
province.cities.forEach(city => {
$city.append(`<option value="${city.name}">${city.name}</option>`);
});
$city.prop('disabled', false); // 启用城市下拉框
}
}
});
// 城市改变时
$city.on('change', function() {
const selectedProvince = $province.val();
const selectedCity = $(this).val();
$district.empty().append('<option value="">请选择区县</option>').prop('disabled', true);
if (selectedCity) {
// 找到选中的省份对象
const province = addressData.find(p => p.name === selectedProvince);
if (province) {
// 找到选中的城市对象
const city = province.cities.find(c => c.name === selectedCity);
if (city) {
// 填充区县下拉框
city.districts.forEach(district => {
$district.append(`<option value="${district}">${district}</option>`);
});
$district.prop('disabled', false); // 启用区县下拉框
}
}
}
});
// 区县改变时 (可选：可以在这里做最终的处理)
$district.on('change', function() {
if ($(this).val()) {
const finalAddress = `${$province.val()} ${$city.val()} ${$(this).val()}`;
console.log("最终选择地址是: " + finalAddress);
// alert("最终选择地址是: " + finalAddress);
}
});
});
</script>
</body>
</html>
代码解析
HTML 结构 (<body> 部分)
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city" disabled>
<option value="">请选择城市</option>
</select>
<select id="district" disabled>
<option value="">请选择区县</option>
</select>
- 我们创建了三个
<select>元素，分别用idprovince,city,district来标识。 - 初始状态下,后两个下拉框是
disabled（禁用）的，因为还没有选择省份。 - 每个下拉框都有一个默认的提示选项。
CSS 样式 (<style> 部分)
这部分代码只是为了美化页面,让三个下拉框看起来更整齐，它不是实现联动的核心，但对于一个“网页”来说是必要的。
jQuery 逻辑 (<script> 部分)
这是整个示例的核心。
-
数据结构 (
addressData): 我们使用了一个嵌套的 JavaScript 对象数组来模拟真实数据。- 第一层是
省份数组。 - 每个省份对象包含
name和cities数组。 cities数组里的每个城市对象又包含name和districts数组。districts数组里就是具体的区县名称。 这个结构非常清晰，方便遍历。
- 第一层是
-
事件处理:
（图片来源网络，侵删）$(document).ready(function() { ... });: 确保页面完全加载后再执行 jQuery 代码。$('#province').on('change', function() { ... });: 监听省份下拉框的change事件，当用户选择一个省份后，触发此函数。- 省份改变逻辑:
- 清空并禁用“城市”和“区县”下拉框。
- 获取用户选择的省份值 (
selectedProvince)。 - 在
addressData中找到对应的省份对象。 - 遍历该省份下的所有城市,动态创建
<option>并添加到“城市”下拉框中。 - 启用“城市”下拉框。
- 城市改变逻辑:
- 清空并禁用“区县”下拉框。
- 获取用户选择的省份和城市值。
- 在
addressData中先找到省份，再找到该省份下的对应城市。 - 遍历该城市下的所有区县,动态创建
<option>并添加到“区县”下拉框中。 - 启用“区县”下拉框。
- 区县改变逻辑: 这是一个可选的步骤，用于获取最终的完整地址，这里我们只是简单地在控制台打印出来。
如何扩展？
如果您想从服务器获取数据,只需将 addressData 替换成一个 AJAX 请求即可。
假设您的服务器 API 返回的数据格式与 addressData 相同：
// 替换掉本地的 addressData 定义
let addressData = [];
// 使用 jQuery AJAX 获取数据
$.ajax({
url: '/api/get_address', // 您的后端 API 地址
type: 'GET',
dataType: 'json',
success: function(data) {
addressData = data; // 将获取到的数据赋值给 addressData
// 然后填充省份下拉框
data.forEach(province => {
$('#province').append(`<option value="${province.name}">${province.name}</option>`);
});
},
error: function() {
alert("获取地址数据失败！");
}
});
其余的联动逻辑完全不需要修改。
（图片来源网络，侵删）
