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
    }

  

posted @ 2018-10-17 16:51  问路-A  阅读(942)  评论(0编辑  收藏  举报