java省市县联动插件_中国省市区三级联动Jquery插件

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

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

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

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

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

Demo:

Province

City

District

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

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

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

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

       

来源网站：太平洋学习网，转载请注明出处：http://www.tpyyes.com/a/js_css/635.html