当前位置：首页 > jquery

jquery三级联动插件

2026-02-04 08:37:06jquery

jQuery三级联动插件推荐

jQuery三级联动插件常用于省市区选择、分类筛选等场景。以下是几款常用插件及其特点：

1. Distpicker

轻量级省市区三级联动插件，支持自定义数据源
支持初始化赋值、事件回调等功能
兼容IE8+及现代浏览器

示例代码：

$('#distpicker').distpicker({
province: '广东省',
city: '深圳市',
district: '南山区'
});

2. PCAS

基于jQuery的经典三级联动插件
内置中国行政区划数据
支持自动选择上级联动
示例代码：
```
$('#address').pcas();
```

3. jQuery Cascade Select

通用级联选择插件，支持N级联动
支持AJAX动态加载数据
可自定义样式和模板

示例代码：

$('#cascade-select').cascadeSelect({
data: regionsData,
multiple: false
});

自定义实现方案

如需自定义开发，可采用以下方案：

数据准备

var regionData = {
  "广东省": {
    "深圳市": ["南山区", "福田区"],
    "广州市": ["天河区", "越秀区"]
  },
  "江苏省": {
    "南京市": ["玄武区", "秦淮区"]
  }
};

HTML结构

<select id="province"></select>
<select id="city"></select>
<select id="district"></select>

jQuery实现

jquery三级联动插件

// 初始化省份
$.each(regionData, function(key) {
  $('#province').append('<option>'+key+'</option>');
});

// 省份变化时加载城市
$('#province').change(function() {
  var province = $(this).val();
  $('#city').empty().append('<option>请选择</option>');
  if(province) {
    $.each(regionData[province], function(key) {
      $('#city').append('<option>'+key+'</option>');
    });
  }
});

// 城市变化时加载区县
$('#city').change(function() {
  var province = $('#province').val();
  var city = $(this).val();
  $('#district').empty().append('<option>请选择</option>');
  if(city && regionData[province][city]) {
    $.each(regionData[province][city], function(i, val) {
      $('#district').append('<option>'+val+'</option>');
    });
  }
});