天天看点

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

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

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

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

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

源码敬上:

GitHub:https://github.com/Zjch/selectcity.git

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

大致逻辑

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

到此,基本上省的默认值就可以加上去了

市和区的方法和省的方法是一模一样的,无非就是for循环嵌套

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

附上我的源码:

GitHub:https://github.com/Zjch/selectcity.git

代码有冗余且烂,希望各位道友不要嫌弃,若有帮助,请点赞

继续阅读