jquery实现省市二级联动
使用 jQuery 实现 **省市二级联动**（即选择省份后，下拉框自动更新对应的市）是一个常见的需求，通常用于表单填写、地址选择等场景。
下面是一个完整的示例，包括 HTML 结构、jQuery 代码和数据结构（使用 JSON 数据），你可以根据需要进行扩展或修改。
---
## ✅ 示例：省市二级联动（HTML + jQuery）
### 1. HTML 部分
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>省市联动选择</h2>
<label for="province">省份：</label>
<select id="province">
<option value="">请选择省份</option>
</select>
<label for="city">城市：</label>
<select id="city">
<option value="">请先选择省份</option>
</select>
<script>
// 省市数据（可以替换为 AJAX 请求）
var provinces = {
"北京": ["东城区", "西城区", "朝阳区", "海淀区"],
"上海": ["黄浦区", "徐汇区", "长宁区", "浦东新区"],
"广东": ["广州市", "深圳市", "珠海市", "佛山市"],
"江苏": ["南京市", "苏州市", "无锡市", "常州市"]
};
$(document).ready(function () {
// 填充省份
$.each(provinces, function (province) {
$('#province').append('<option value="' + province + '">' + province + '</option>');
});
// 省份变化时更新城市
$('#province').change(function () {
var selectedProvince = $(this).val();
var cities = provinces[selectedProvince] || [];
$('#city').empty().append('<option value="">请选择城市</option>');
if (cities.length > 0) {
$.each(cities, function (index, city) {
$('#city').append('<option value="' + city + '">' + city + '</option>');
});
}
});
});
</script>
</body>
</html>
```
---
## 🔍 说明
- 使用了一个 `provinces` 对象来存储省市区的映射关系。
- 使用 jQuery 的 `.change()` 方法监听省份选择的变化。
- 当省份改变时，清空城市下拉框并重新填充对应的城市选项。
---
## 📌 扩展建议
- 如果数据量大，可以将数据通过 AJAX 动态加载。
- 可以添加更多层级（如：省 -> 市 -> 区）。
- 可以用 `<optgroup>` 来优化显示结构。
- 可以加入验证逻辑，防止用户未选省份就提交表单。
---
如果你需要从数据库动态获取数据，或者使用 JSON 文件，请告诉我，我可以提供相应的 AJAX 示例。