Select2 实现二级联动：省市区选择案例

你还在为网页表单中的省市区选择功能繁琐而烦恼吗？用户需要在多个下拉框中依次选择，体验差且容易出错？本文将教你使用Select2（基于jQuery的下拉框增强插件）快速实现流畅的省市区二级联动功能，只需简单几步，即可让用户在选择省份后自动加载对应城市列表，提升表单填写体验。读完本文，你将掌握Select2的数据源配置、事件监听和动态数据加载技巧，轻松实现各类联动下拉框。

准备工作

首先需要引入Select2的CSS和JavaScript资源，推荐使用国内CDN以确保访问速度：

<!-- 引入Select2 CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入Select2 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

官方安装文档：docs/pages/01.getting-started/01.installation/docs.md

HTML结构设计

创建两个Select2下拉框，分别用于选择省份和城市：

<div class="form-group">
  <label>省份：</label>
  <select id="province" class="form-control select2" style="width: 100%;"></select>
</div>

<div class="form-group">
  <label>城市：</label>
  <select id="city" class="form-control select2" style="width: 100%;"></select>
</div>

实现思路

数据准备

我们使用本地数组作为数据源，模拟省市区数据。实际项目中可替换为AJAX请求后端接口获取数据：

// 省份数据
const provinces = [
  { id: '110000', text: '北京市' },
  { id: '310000', text: '上海市' },
  { id: '440000', text: '广东省' }
];

// 城市数据（key为省份ID）
const cities = {
  '110000': [
    { id: '110101', text: '东城区' },
    { id: '110102', text: '西城区' }
  ],
  '310000': [
    { id: '310101', text: '黄浦区' },
    { id: '310104', text: '徐汇区' }
  ],
  '440000': [
    { id: '440100', text: '广州市' },
    { id: '440300', text: '深圳市' }
  ]
};

数组数据源配置方法可参考官方文档：docs/pages/06.data-sources/03.arrays/docs.md

初始化Select2

分别初始化省份和城市下拉框：

// 初始化省份选择框
$('#province').select2({
  data: provinces,
  placeholder: '请选择省份',
  allowClear: true
});

// 初始化城市选择框（默认禁用）
$('#city').select2({
  data: [],
  placeholder: '请先选择省份',
  disabled: true,
  allowClear: true
});

配置项详细说明：docs/pages/03.configuration/01.options-api/docs.md

实现联动逻辑

通过监听省份选择框的select2:select事件，动态加载对应城市数据：

// 监听省份选择事件
$('#province').on('select2:select', function (e) {
  const provinceId = e.params.data.id;
  
  // 启用城市选择框并加载数据
  $('#city').prop('disabled', false).select2({
    data: cities[provinceId] || []
  });
});

// 监听省份清除事件
$('#province').on('select2:unselect', function () {
  // 清空并禁用城市选择框
  $('#city').val(null).prop('disabled', true).trigger('change.select2');
});

Select2事件系统详解：docs/pages/12.programmatic-control/04.events/docs.md

效果演示

省份选择下拉框（使用项目内美国州旗图片作为示例）

选择省份后，城市下拉框会自动加载对应数据：

// 选择"广东省"后城市下拉框数据示例
[
  { id: '440100', text: '广州市' },
  { id: '440300', text: '深圳市' }
]

常见问题解决

动态数据不更新

如果城市下拉框数据未更新，可尝试触发change事件：

$('#city').select2({ data: newData }).trigger('change.select2');

使用AJAX加载数据

实际项目中建议使用AJAX从后端接口获取数据，示例代码：

$('#province').select2({
  ajax: {
    url: '/api/provinces',
    dataType: 'json',
    processResults: function (data) {
      return { results: data };
    }
  }
});

AJAX数据源配置：docs/pages/06.data-sources/02.ajax/docs.md

总结

本文介绍了如何使用Select2实现省市区二级联动功能，主要包括：

1. 引入Select2资源并配置基础HTML结构
2. 使用数组数据源初始化下拉框
3. 通过事件监听实现动态数据加载
4. 解决常见问题的实用技巧

掌握这些技巧后，你可以轻松实现各种联动选择功能，提升用户体验。Select2还有更多高级特性，如搜索、分页、自定义模板等，等待你去探索。

官方完整文档：docs/README.md

如果觉得本文有帮助，欢迎点赞收藏，关注获取更多前端实用技巧！