中国省市区三级联动Jquery插件经常被使用到，不管是网站还是app，这个都是需要掌握的，我们知道中国省市区三级联动的数据可以存储在mysql数据库中，也可以直接存储在distpicker.data.js这样的js文件中，下面来开始学习如何使用Jquery省市区三级联动插件。

下方的案例样式使用的是bootstrap，效果如图：

步骤一：在我们开始使用中国省市区地址三级联动Jquery插件的时候，需要在文件头部或footer底部引入如下几个js文件：

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="distpicker.data.js"></script>
<script src="distpicker.js"></script>

步骤二：当我们引入如上这些js文件之后，就可以加入如上这种省市区三级联动的选项了，代码如下：

<div data-toggle="distpicker">
  <select></select>
  <select></select>
  <select></select>
</div>

备注：当然了，这样直接加进来的HTML代码虽然是一个三级联动效果，但是并没有任何bootstrap css样式的效果，因此完整的代码可以这样写，这样的效果就跟上图是一模一样具有bootrap效果了：

<h5>Demo:</h5>
<form class="form-inline">
  <div data-toggle="distpicker">
	<div class="form-group">
	  <label class="sr-only" for="province1">Province</label>
	  <select class="form-control"></select>
	</div>
	<div class="form-group">
	  <label class="sr-only" for="city1">City</label>
	  <select class="form-control"></select>
	</div>
	<div class="form-group">
	  <label class="sr-only" for="district1">District</label>
	  <select class="form-control"></select>
	</div>
  </div>
</form>

注意点：如果我们给data-toggle的值设置为“distpicker1”而不是“distpicker”的话，我们的省市区三级联动就不会有数据显示的，因为distpicker插件默认初始化的是data-toggle="distpicker"。

如果我们不给div标签设置data-toggle属性，而只设置成id属性，如下所示：

<div id="distpicker1">
  <select></select>
  <select></select>
  <select></select>
</div>

那么我们就需要给div的三级联动选项进行初始化，不然就不会有任何效果，应该在页面加载的时候添加如下js初始化代码：

$("#distpicker1").distpicker();

如果想要学习到更多中国省市区地址三级联动Jquery插件的效果，请查看学习：