码迷,mamicode.com
首页 > Web开发 > 详细

js实现省市区三级联动

时间:2017-05-15 11:15:09      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:git   准备   contain   方法   电商   根据   信息   span   三级联动   

电商平台或者一些网站的个人信息部分,通常会有填写地址的功能。该功能一般分为二级联动(省、市)和三级联动(省、市、区),只需要JavaScript就可以实现。

这里介绍一种很简洁易用的方法。参考地址:https://github.com/fengyuanchen/distpicker

获取上面Github目录下的dist/distpicker.js文件,然后准备一份jquery.js文件。

接下来,新建一个测试的HTML页面。

首先,引入以上的两个js文件:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/distpicker.js"></script>

然后,新建select选择器:

<div><!-- container -->
  <select></select><!-- province -->
  <select></select><!-- city -->
  <select></select><!-- district -->
</div>

要想实现三级联动,需要进行初始化,方法就是为div元素添加一个属性:

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

有时,根据自己需要,会为选择框设定默认值,同样需要为select元素添加属性:

<div data-toggle="distpicker">
  <select data-province="---- 选择省 ----"></select>
  <select data-city="---- 选择市 ----"></select>
  <select data-district="---- 选择区 ----"></select>
</div>

 

js实现省市区三级联动

标签:git   准备   contain   方法   电商   根据   信息   span   三级联动   

原文地址:http://www.cnblogs.com/thErving/p/6855488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!