在《中国省、市区二级联动下拉选择框-JS源码》文章中我们分享了省、市区二级联动的JS实现代码，今天125建站网给大家分享一款中国省、市、区县三级联动的代码，通过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
微信扫一扫 
支付宝扫一扫