最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

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

JS/CSS 太平洋学习网 浏览 评论

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

下方的案例样式使用的是bootstrap,效果如图:

20180619102412.jpg

步骤一:在我们开始使用中国省市区地址三级联动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插件的效果,请查看学习:

       

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

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论