正文
js实现省市区三级联动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
电商平台或者一些网站的个人信息部分，通常会有填写地址的功能。该功能一般分为二级联动（省、市）和三级联动（省、市、区），只需要JavaScript就可以实现。
这里介绍一种很简洁易用的方法。参考地址：https://github.com/fengyuanchen/distpicker
获取上面Github目录下的dist/distpicker.js文件，然后准备一份jquery.js文件。
接下来，新建一个测试的HTML页面。
首先，引入以上的两个js文件：
【注意】jquery文件一定要在distpicker前面，否则无法生效
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/distpicker.js"></script>
然后，新建select选择器：
<div><!-- container -->
<select></select><!-- province -->
<select></select><!-- city -->
<select></select><!-- district -->
</div>
要想实现三级联动，需要进行初始化，方法就是为div元素添加一个属性：
<div data-toggle="distpicker">
<select></select>
<select></select>
<select></select>
</div>
有时，根据自己需要，会为选择框设定默认值，同样需要为select元素添加属性：
<div data-toggle="distpicker">
<select data-province="---- 选择省 ----"></select>
<select data-city="---- 选择市 ----"></select>
<select data-district="---- 选择区 ----"></select>
</div>
