使用distpicker生成省市区三级联动效果

“秀樾横塘十里香，水花晚色静年芳”
今天在网上找了一个三级联动的js插件，感觉挺好用的，在这里分享一下。参考原文地址

步骤

1. 下载上面链接内容中的js源文件；
2. 在项目中引入该文件；

//在此之前你需要先引入jQuery的js和bootstrap的js源文件
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>

3. 编写页面

<form class="form-inline">
      <div id="distpicker3">
        <div class="form-group">
          <label class="sr-only" for="province6">Province</label>
          <select class="form-control" id="province6"></select>
        </div>
        <div class="form-group">
          <label class="sr-only" for="city6">City</label>
          <select class="form-control" id="city6"></select>
        </div>
        <div class="form-group">
          <label class="sr-only" for="district6">District</label>
          <select class="form-control" id="district6"></select>
        </div>
      </div>
    </form>

4. 这样就可以访问页面了，下拉框中默认展示北京。
   
5. 如果想默认显示其他地市，则需编写js赋默认值。

$('#distpicker3').distpicker({
    province: '浙江省',
    city: '杭州市',
    district: '西湖区'
  });

效果如图：