虚拟主机域名注册-常见问题网络编程问题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奥格斯堡
赛车飞艇就是骗局 捕鱼大师从哪里可以下载 乡里彩虹成显雨 pk10免费预测软件 pk10精准计划软件手机 网络pk10是不是骗局 竞彩胜负平 看牌抢庄牛牛20元进场 红马计划手机网页 贝贝游戏通比牛牛技巧 时时彩大概率900平刷 不看牌抢庄牛牛规律 甘肃快三今日推荐跟号 即时比分新浪 云南时时官网 pk10五码两期全天计划