虚拟主机域名注册-常见问题网络编程问题JS

js实现省市区县三级联动 可自定义初始值

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

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

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

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

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

【注意】jquery文件一定要在distpicker前面,否则无法生效

<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>

有时,根据自己需要,会为选择框设定默?#29616;担?#21516;样需要为select元素添?#37038;?#24615;:

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


来源:
阅读:979
日期:2017-11-03

【 字体: 】 
上一篇:form提交不同utf8 gb2312编码的数据乱码
下一篇:百度编辑器 UEditor上传?#35745;?title数?#20013;?#25913;成?#35745;?#21517;称
  >> 相关文章
 
发表评论

字数0
请输入验证码:


  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的?#25105;?#20869;容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并?#37038;?#19978;述条款
网友评论
没有相关评论。
会员 客服 QQ 电话 充值 工单
Top

24小时客服热线

①18036323215

②18036323215

咨询售后问题请进入 工单提问

多特vs奥格斯堡
山西快乐十分平台 2019年免费资枓 江苏快3计算开奖结果 官方北京赛车pk10开奖 现场报码现场直播 pk10实时开奖视频 广东时时历史记录查询结果 香港马开奖历史记录 时时彩app 幸运28走势图教程 陕西快乐十分前三值最大遗漏 甘肃省快3玩法必中技巧 华东15选5开奖视频 历史的今天三地开奖号 快乐十二助手app 河南快3开奖结果