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%的人还看了以下文章

  • Marquee标签实现跑马灯、滚动公告、通知效果

    1.Marquee基本语法 <marquee> … </marquee> 实例演示:会移动的文字(Marquee) <marquee>啦啦啦,我会移动耶!</marquee> 2.文字移动属性 (1)方向 :direction=# #=left, right,up,down 例: <marqu…

    2019年2月26日
    7.7K0
  • 简单纯js实现的网页tab选项卡切换效果

    今天给大家分享一款非常简单实用的JS网页tab选项卡切换效果,当鼠标放到不同的标签项上或单击该栏目标签会显示不同的内容。

    2018年2月12日
    1.8K0
  • 点击按钮发送验证码,隔10秒再次发送倒计时效果-JS代码

    为了防止用户恶意获取短信验证码或邮箱验证,在网站制作时会考虑在点击获取验证码的按钮上做个倒计时的效果。 需要隔10秒再次发送, 实现这个功能,需要用到setInterval和clearInterval。 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearIn…

    2019年10月31日
    2.2K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    3.9K0
  • 在网页中间弹窗代码-网页遮罩效果

    在网页中间弹出窗口,使整个网页变半透明。 关闭  125网页设计-权威的网页制作,网页设计教程基地:包含html、css、Javascript等教程及网页制作素材,网页设计欣赏,免费空间,网站推广等资源 点击,在网页中间弹出窗口

    2019年1月5日
    3.4K0
  • 100种精美的网页时钟特效,总有一款是你需要的

    web骇客收集了100种使用CSS+JS+HTML制作的时钟、钟表、手表等特效,分为漂亮的时钟特效、有创意的时钟、电子钟,每一种实现都提供源代码,可以方便网页制作爱好者们拷贝使用,如果你需要在网页中添加时钟特效,在这里一定会有一款你喜欢的。

    2018年9月27日
    5.8K0

发表回复

登录后才能评论