30行代码实现js原生三级联动菜单

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

    }