js实现省市区三级联动菜单效果

效果如下：

代码如下：

！DOCTYPE html html head meta charset=' utf-8 '标题省市区三级联动/标题/床头柜表单选择id='省份'选项请选择省份/option/选择选择id='city '选项请选择城市/option/选择选择id='地区'选项请选择区域/option/select/form脚本src=' http : JSON。js '/script脚本类型=' text/JavaScript ' var proData=[]，cityData=[]，distData=[]；var prosele=文档。getelementbyid('省)、城市选择=文件。getelementbyid('市)、地区选择=文件。getelementbyid('区');var curPro=' '，curCity=//封装更新选择列表函数函数fillselect(select，list){ for(var I=select。长度-1；I 0；I-){ select。去掉(一)；} list.forEach(函数（数据){ var option=new Option(data.name，data。盛)；选项。数据集。di=数据。di；select.add(选项);}) } //将数据按省、市、地区分别存储dataJson.forEach(函数（数据){ if(数据。level===1){ prodata。推送(数据);} if(数据。level===2){城市数据。推送(数据)；} if(数据。level===3){ distdata。推送(数据)；} })填充选择(prosele，proData)；//监听一级省份选择列表变化事件，更新二级城市列表普罗塞尔。addeventlistener(' change '，function(event){ var val=event。目标。价值；定义变量列表=[];cityData.forEach(函数(d){ if(d . sheng===val){ list。push(d)；} }) fillselect(citySelect，list)；}) //监听二级城市选择列表变化事件，更新三级区域列表城市选择。addeventlistener(' change '，function(event){ var val=event。目标。价值；var curIndex=事件。目标。selectedindexcurCity=事件。目标[curIndex]。数据集。di；console.log(event.target，curCity)；定义变量列表=[];distData.forEach(函数(d){ if(d . di===curCity d . sheng===val){ list。push(d)；} }) fillselect(districtSelect，list)；})/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！