jquery实现省市二级联动

封面图 • 2025-09-18 • jQuery

使用 **jQuery** 实现 **省市二级联动**（即选择省份后，动态显示对应的城市列表）是一个常见的需求。下面是一个完整的示例，包括 HTML、CSS 和 jQuery 代码。

---

## ✅ 示例功能说明

- 用户选择一个省份
- 根据所选省份，动态加载对应的城市列表
- 使用 JSON 数据模拟数据源

---

## 📁 文件结构（示例）

```
index.html
data.json
```

---

## 📄 index.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>

// 填充省份下拉框
        $.each(provinces, function (index, province) {
            $('#province').append($('<option>', {
                value: province.name,
                text: province.name
            }));
        });

// 省份选择事件
        $('#province').change(function () {
            var selectedProvince = $(this).val();
            var cities = [];

// 查找对应城市
            $.each(provinces, function (index, province) {
                if (province.name === selectedProvince) {
                    cities = province.cities;
                    return false; // 退出循环
                }
            });

// 清空城市下拉框
            $('#city').empty();
            $('#city').append($('<option>', { value: '', text: '请选择城市' }));

// 填充城市下拉框
            $.each(cities, function (index, city) {
                $('#city').append($('<option>', {
                    value: city,
                    text: city
                }));
            });
        });
    });
});
</script>

</body>
</html>
```

---

## 🗂️ data.json（放在与 `index.html` 同一目录下）

```json
{
    "provinces": [
        {
            "name": "北京市",
            "cities": ["北京市"]
        },
        {
            "name": "广东省",
            "cities": ["广州市", "深圳市", "珠海市", "东莞市"]
        },
        {
            "name": "江苏省",
            "cities": ["南京市", "苏州市", "无锡市", "常州市"]
        },
        {
            "name": "浙江省",
            "cities": ["杭州市", "宁波市", "温州市", "绍兴市"]
        }
    ]
}
```

---

## 🧪 效果预览

1. 页面加载后，会自动加载省份选项。
2. 当用户选择一个省份时，城市下拉框会根据该省份的 `cities` 列表动态更新。
3. 如果没有选择省份，城市下拉框默认提示“请先选择省份”。

---

## 🔄 可扩展性

- 可以将数据从后端 API 获取，而不是本地 JSON 文件。
- 可以添加三级联动（省 -> 市 -> 区/县）。
- 可以加入搜索功能或样式美化。

---

如需我帮你生成带中文注释的完整项目结构或打包成 ZIP 文件，请告诉我！