原生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
代码有冗余且烂,希望各位道友不要嫌弃,若有帮助,请点赞