zoukankan      html  css  js  c++  java
  • 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
        }
    

      

  • 相关阅读:
    MyBatis入门
    Java JDBC
    Spring MVC
    Java内存模型
    Java日志
    Java I/O模型
    Java异常处理
    Java泛型设计
    Java反射
    Java代理
  • 原文地址:https://www.cnblogs.com/gmajip/p/9805180.html
Copyright © 2011-2022 走看看