distpicker省市区联动 jquery+bootstrap

最近在网上下载distpicker省市区三级联动源码，使用过程中发现无法动态赋值，所以自己制作了一个基础jquery+bootstrap的distpicker插件。

源码下载地址： 2017省市区联动插件

1、首先引用JS及CSS

<link href="bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.2.1.js"></script>
<script src="distpicker.js"></script>

2、页面DOM布局

<div class="container-fluid" >
    <div class="row form-inline" style="margin:20px;">
        <div id="disSelect">
            <label class="control-label">测试效果有默认值</label>
            <select class="form-control" id="province" data-province="四川省"></select>
            <select class="form-control" id="city" data-city="成都市"></select>
            <select class="form-control" id="county" data-county="龙泉驿区"></select>
        </div>
    </div>
    <div class="row form-inline" style="margin:20px;">
        <div class="form-inline">
            <div id="disSelect2">
                <label class="control-label">测试效果无默认值</label>
                <select class="form-control" id="province1"></select>
                <select class="form-control" id="city1"></select>
                <select class="form-control" id="county1"></select>
            </div>
        </div>

    </div>
</div>

3、调用JS回写数据

<script type="text/javascript">
    $(function() {
        $("#disSelect").distpicker();
        $("#disSelect2").distpicker();
    });

</script>

4、如需设置默认值，将data-province,data-city,data-county属性值更改后调用distpicker即可

<script type="text/javascript">
    $(function() {
	$("#province").attr("data-province","四川省")
	$("#city").attr("data-city","成都市")
	$("#county").attr("data-county","双流区")
        $("#disSelect").distpicker();
        
    });

</script>

5、最重要的是数据，数据更新至2017年9月，数据内置于distpicker.js文件内

数据下载地址： 城市json数据