jquery省市二级联动
jQuery 实现省市二级联动
省市二级联动是一种常见的表单交互功能，用户选择省份后，城市下拉框自动加载对应的城市列表。以下是实现方法：
数据结构准备
需要准备一个包含省市关联关系的数据结构，通常使用对象或数组存储：
var cityData = {
"北京": ["东城区", "西城区", "朝阳区", "海淀区"],
"上海": ["黄浦区", "徐汇区", "长宁区", "静安区"],
"广东": ["广州市", "深圳市", "珠海市", "东莞市"]
};HTML 结构
创建两个 select 元素分别用于选择省份和城市：
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>初始化省份列表
使用 jQuery 遍历数据对象的键（省份）并填充到省份下拉框：
$(document).ready(function() {
$.each(cityData, function(province, cities) {
$('#province').append($('<option>').val(province).text(province));
});
});绑定 change 事件
当省份选择发生变化时，清空城市下拉框并重新填充对应的城市列表：
$('#province').change(function() {
var selectedProvince = $(this).val();
$('#city').empty().append($('<option>').val('').text('请选择城市'));
if (selectedProvince) {
$.each(cityData[selectedProvince], function(index, city) {
$('#city').append($('<option>').val(city).text(city));
});
}
});完整代码示例
<!DOCTYPE html>
<html>
<head>
<title>省市二级联动</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<script>
var cityData = {
"北京": ["东城区", "西城区", "朝阳区", "海淀区"],
"上海": ["黄浦区", "徐汇区", "长宁区", "静安区"],
"广东": ["广州市", "深圳市", "珠海市", "东莞市"]
};
$(document).ready(function() {
$.each(cityData, function(province, cities) {
$('#province').append($('<option>').val(province).text(province));
});
$('#province').change(function() {
var selectedProvince = $(this).val();
$('#city').empty().append($('<option>').val('').text('请选择城市'));
if (selectedProvince) {
$.each(cityData[selectedProvince], function(index, city) {
$('#city').append($('<option>').val(city).text(city));
});
}
});
});
</script>
</body>
</html>动态加载数据
如果数据量较大，建议通过 AJAX 从服务器动态加载省市数据：
$.get('/api/provinces', function(provinces) {
$.each(provinces, function(index, province) {
$('#province').append($('<option>').val(province.id).text(province.name));
});
});
$('#province').change(function() {
var provinceId = $(this).val();
$.get('/api/cities?province_id=' + provinceId, function(cities) {
$('#city').empty();
$.each(cities, function(index, city) {
$('#city').append($('<option>').val(city.id).text(city.name));
});
});
});注意事项
- 确保数据结构的正确性，省份和城市对应关系要准确
- 处理空选择的情况，避免出现 undefined 错误
- 对于大型数据集，考虑使用分步加载或懒加载提高性能
- 移动端使用时注意触摸事件的兼容性
以上方法可以实现基本的省市二级联动功能，根据实际需求可以进一步扩展和优化。
