中国省市区三级联动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插件的效果,请查看学习: