var oneArr=[['00','成都'],['01','绵阳'],['02','南充']] var towArr={ '00':[['000','武侯区'],['002','锦江区']], '01':[['003','游仙区'],['004','涪江区']], '02':[['005','顺庆区'],['006','高坪区'],['007','嘉陵区']] } var threeArr={ '000':[['0','街道1'],['1','街道2'],['2','街道3'],['3','街道4'],['4','街道5']], '002':[['0','街道11'],['1','街道22'],['2','街道33'],['3','街道44'],['4','街道55']], '003':[['0','街道21'],['1','街道22'],['2','街道23'],['3','街道24'],['4','街道25']], '004':[['0','街道22'],['1','街道22'],['2','街道23'],['3','街道24'],['4','街道25']], '005':[['0','街道31'],['1','街道32'],['2','街道33'],['3','街道34'],['4','街道35']], '006':[['0','街道32'],['1','街道32'],['2','街道33'],['3','街道34'],['4','街道35']], '007':[['0','街道331'],['1','街道332'],['2','街道333'],['3','街道334'],['4','街道335']] } var one=document.getElementById('one') var tow=document.getElementById('tow') var three=document.getElementById('three') // 一级菜单 var oneNode = eachOption(oneArr) addOption(one,oneNode) // 二级菜单 var towNode = eachOption(towArr['00']) addOption(tow,towNode) // 三级菜单 var threeNode=eachOption(threeArr['000']) addOption(three,threeNode) // 一级菜单事件 one.onchange=function (e) { var towNode = eachOption(towArr[this.value]) addOption(tow,towNode) var threeNode = eachOption(threeArr[tow.value]) addOption(three,threeNode) } // 二级菜单事件 tow.onchange=function (e) { var threeNode = eachOption(threeArr[this.value]) addOption(three,threeNode) } // 循环选项 function eachOption(arr) { var op='' for (let i = 0; i < arr.length ; i++) { op+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>' } return op; } // 插入选项 function addOption(id,option) { id.innerHTML=option }