当前位置：首页 > jquery

jquery省市二级联动

2026-02-04 09:11:21jquery

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 从服务器动态加载省市数据：

jquery省市二级联动

$.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));
        });
    });
});