原生JS实现二级联动

1、代码

image.png

erjiliandong.css

*{
    margin: 0;
    padding: 0;
}

li{
    list-style: none;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5%;
}
#ld{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}
#ld-left > .ld-key{
    width: 190px;
    height: 40px;
    border-bottom: 1px solid aliceblue;
    background: blueviolet;
}
#ld-left >.ld-right > .ld-value{
    width: 190px;
    height: 40px;
    border-bottom: 1px solid aliceblue;
    background: green;
}
#ld-left{
    width:100px;
    height:150px;
}

erjiliandong.js

function liandong(arg){
    this.create(arg);                   //入口
}
liandong.prototype={
    create:function(arg){
        this.sit=arg;                   //保存数据
        this.key=[];                    //做key值储存池，留做渲染
        this.clickFlag = [];
        var _self=this;
        getKey(arg,_self);              //获取key值
        this.showKey(this.key);         //渲染key值
        this.keyEvent();                //点击事件
    },
    showKey:function(key){                  //渲染key
        var left=document.getElementById('ld-left');
        for(var index=0;index
    





    
    
    
    


    销毁



        

            

            
            

            
        
    

2、效果

image.png

image.png