原生js实现省市区的三级联动

原生js实现省市区的三级联动

由于项目需求需要省市区三级联动,然后打开百度一身搜索,发现都不尽人意

  • 最基本的三级联动
  • 可以传入默认值,并且传入之后,还可以选择其他项

就这俩需求,找了一天也没找到,主要是第二个需求有点蛋疼,无奈自己写了一个

源码敬上:
GitHub:https://github.com/Zjch/selectcity.git


第一个需求,我就不详细说了,主要说一下,第二个

大致逻辑
  • 把你要传的省市区放到一个数组里面
var arr =['xx省''xx市','xx区']
  • 遍历你的城市(我把所有的省市区都放在了一个js里面,json格式)
  • 先循环遍历省,然后将省放到你的第一个select里面
  • 这时候你就要把你刚才的默认省拿过来判断了
if(arr[0] == provinc[i].name){
    //记录下标
    //给你的provinc[i]这一项加上select="select"
}

到此,基本上省的默认值就可以加上去了
市和区的方法和省的方法是一模一样的,无非就是for循环嵌套

解决有些插件,加入默认值之后,不可灵活选择,只能从省到区一级一级选
解决有些插件,省 市 区 对应错位问题

附上我的源码:
GitHub:https://github.com/Zjch/selectcity.git
代码有冗余且烂,希望各位道友不要嫌弃,若有帮助,请点赞

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值