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

2021年4月28日 76次阅读 来源: 丸子'

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

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

《中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区》
2：自定义占位符

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

《中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区》
3：自定义默认选中区域

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

《中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区》
4：使用$(jQuery的方式直接初始化)

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

《中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区》
jQuery方式的自定义占位符

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

《中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区》
jQuery方式设置默认选中的部分

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

《中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区》
如果根据需求不提供区、或、市的选择去掉多余的select标签即可
如：仅省、市联动

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

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

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

《中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区》
取消占位符
设置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.csdn.net/download/qq_41193701/12031565
原作者GitHub链接：https://github.com/fengyuanchen/distpicker

    原文作者：丸子'
    原文地址: https://blog.csdn.net/qq_41193701/article/details/103526259
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞