在城市选择功能日益普遍的今天，城市二级联动已经成为许多Web应用中不可或缺的一环。jQuery凭借其简洁的语法和强大的功能，成为实现城市二级联动的首选工具之一。本文将详细介绍如何使用jQuery轻松实现城市二级联动。

1. 准备工作

在开始之前，请确保已经引入了jQuery库。以下是jQuery的官方CDN链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 创建HTML结构

首先，我们需要创建一个基本的HTML结构，包括省份和城市的选择框：

<select id="province">
    <option value="">请选择省份</option>
    <!-- 省份选项将在此处动态添加 -->
</select>

<select id="city">
    <option value="">请选择城市</option>
    <!-- 城市选项将在此处动态添加 -->
</select>

3. 创建JSON数据

为了实现联动效果，我们需要准备省份和城市的JSON数据。以下是一个示例：

[
    {
        "province": "北京市",
        "cities": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"]
    },
    {
        "province": "上海市",
        "cities": ["上海市", "嘉定区", "普陀区", "宝山区"]
    }
    // ... 其他省份和城市数据
]

4. 编写jQuery代码

接下来，我们将编写jQuery代码来动态添加省份和城市选项，并实现联动效果：

$(document).ready(function() {
    // 假设jsonData是上面定义的JSON数据
    var jsonData = [
        // ... 省份和城市数据
    ];

    // 添加省份选项
    jsonData.forEach(function(item) {
        $("#province").append($("<option>").val(item.province).html(item.province));
    });

    // 省份选择框变更时，动态添加城市选项
    $("#province").change(function() {
        var province = $(this).val();
        $("#city").empty().append($("<option>").val("").html("请选择城市"));
        jsonData.forEach(function(item) {
            if (item.province === province) {
                item.cities.forEach(function(city) {
                    $("#city").append($("<option>").val(city).html(city));
                });
            }
        });
    });
});

5. 完成效果

经过以上步骤，当你选择一个省份后，城市下拉列表将自动填充对应的城市选项。这样，用户就可以轻松地选择所需的省份和城市了。

6. 总结

通过使用jQuery，我们可以轻松实现城市二级联动效果。本文介绍了如何创建HTML结构、准备JSON数据以及编写jQuery代码来实现这一功能。在实际应用中，你可以根据需要调整和扩展代码，以满足不同场景的需求。