中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区

最新推荐文章于 2023-03-17 17:07:56 发布

丸子'

最新推荐文章于 2023-03-17 17:07:56 发布

阅读量727

点赞数

分类专栏： jQuery插件文章标签： jquery html5

原文链接：https://github.com/fengyuanchen/distpicker

版权

jQuery插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一款在前端项目中实现省市区三级联动的高效插件，支持多种使用方式，包括直接引用自动关联、自定义占位符、设置默认选中区域等，且兼容性和配置灵活。该插件简化了开发流程，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端时间项目开发中因为使用的是jQuery 项目需要用到三级联动在网上找了很久都不是比较简便和理想最后不经意之间找到这个插件也顺便分享给大家博主在次处作为转载方开源不易大家也可也到原博主的GitHub中点上☆☆支持一下
插件有很多种不同模式在配置、兼容、和使用方面都比较完美
在页面中引入封装好了的必要js文件即可其使用方式有多种可根据实际需要进行使用
1：直接引用自动关联

<div data-toggle="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>

在这里插入图片描述
2：自定义占位符

<div data-toggle="distpicker">
  <select data-province="---- 选择省 ----"></select>
  <select data-city="---- 选择市 ----"></select>
  <select data-district="---- 选择区 ----"></select>
</div>

在这里插入图片描述
3：自定义默认选中区域

<div data-toggle="distpicker">
  <select data-province="四川省"></select>
  <select data-city="成都市"></select>
  <select data-district="锦江区"></select>
</div>

在这里插入图片描述
4：使用$(jQuery的方式直接初始化)

<div id="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>
<script>
//使用jQuery的方式引用
$("#distpicker").distpicker();
</script>

在这里插入图片描述
jQuery方式的自定义占位符

<div id="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>
<script>
$("#distpicker").distpicker({
  province: "---- 所在省 ----",
  city: "---- 所在市 ----",
  district: "---- 所在区 ----"
});
</script>

在这里插入图片描述
jQuery方式设置默认选中的部分

<div id="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>
<script>
$("#distpicker").distpicker({
  province: "浙江省",
  city: "杭州市",
  district: "西湖区"
});
</script>

在这里插入图片描述
如果根据需求不提供区、或、市的选择去掉多余的select标签即可
如：仅省、市联动

<div data-toggle="distpicker">
  <select></select>
  <select></select>
</div>

在这里插入图片描述
仅省

<div data-toggle="distpicker">
  <select></select>
</div>

在这里插入图片描述
取消占位符
设置placeholder为false即可

$("#distpicker").distpicker({
  placeholder: false
});

取消自动关联
设置autoSelect为false即可

$("#distpicker").distpicker({
  autoSelect: false
});

页面中引用的必要js文件当然jQuery是比不可少的这里我只提示三级联动的必要js文件

<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script src="js/main.js"></script>

js资源文件链接：https://download.youkuaiyun.com/download/qq_41193701/12031565
原作者GitHub链接：https://github.com/fengyuanchen/distpicker