jQuery插件实现省、市、区县三级联动代码,调用非常简单

在《中国省、市区二级联动下拉选择框-JS源码》文章中我们分享了省、市区二级联动的JS实现代码,今天125建站网给大家分享一款中国省、市、区县三级联动的代码,通过jQuery插件实现,调用非常简洁。

jQuery插件实现省、市、区县三级联动代码,调用非常简单

HTML结构

基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。

<div><!-- container -->
  <select></select><!-- 省 -->
  <select></select><!-- 市 -->
  <select></select><!-- 区 -->
</div>

可以直接通过data-toggle=”distpicker”实现来进行初始化。

<div data-toggle="distpicker"><!-- container -->
  <select></select><!-- 省 -->
  <select></select><!-- 市 -->
  <select></select><!-- 区 -->
</div>

还可以显示占位文本。

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

自定义省市区。

<div data-toggle="distpicker">
  <select data-province="山东省"></select>
  <select data-city="烟台市"></select>
  <select data-district="蓬莱市"></select>
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过distpicker()方法来初始化该地址联动插件。

$('#target').distpicker();

自定义占位文本:

$('#target').distpicker({
  province: '---- 所在省 ----',
  city: '---- 所在市 ----',
  district: '---- 所在区 ----'
});

自定义省市区。

$('#target').distpicker({
  province: '山东省',
  city: '济南市',
  district: '历下区'
});

源码下载:jQuery插件实现省、市、区县三级联动代码,调用非常简单        查看演示

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3529.html

(1)
上一篇 2019年6月5日 上午9:43
下一篇 2019年6月11日 上午8:14

99%的人还看了以下文章

发表评论

登录后才能评论