原生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<key.length;index++){
            var msg=key[index];
            var li=document.createElement('li');
            li.id = 'ld-key'+index;
            li.setAttribute("class",'ld-key');
            li.innerText=msg;
            left.appendChild(li);
            var ul=document.createElement('ul');
            ul.id="ld-right"+index;
            ul.setAttribute("class",'ld-right');
            left.appendChild(ul);
        }
        
    },
    keyEvent:function(){            //li的点击事件
        var _self=this;             //保存对象
        var key=document.getElementById('ld-left');
        var list=key.childNodes;
        for( i in list){
            var i=i;
            if(list[i].nodeName=='LI'){
                list[i].onclick=function(){
                    var k=this.innerText;
                    var xid = (this.id).replace("ld-key","");
                    _self.showValue(k,xid);
                }
            }
        }
    },
    showValue:function(key,xid){        //显示value值
        var right=document.getElementById('ld-right'+xid);
        this.clearValue(right);
        debugger;
        if(this.clickFlag[xid]==null ||this.clickFlag[xid]==true){
            var value=this.sit[key];
            for(var index=0;index<value.length;index++){
                var msg=value[index];
                var li=document.createElement('li');
                li.setAttribute("class",'ld-value');
                li.innerText=msg;
                right.appendChild(li);
            }
            this.clickFlag[xid] = false;
        }else{
            this.clickFlag[xid] = true;
        }
    },
    clearValue:function(right){     //  清除value值
        right.innerHTML=null;   
    },
    destory:function(){
        this.sit=[];                    //保存数据
        this.key=[];                    //做key值储存池,留做渲染
        this.clickFlag = [];
        var left=document.getElementById('ld-left');
        left.innerHTML=null;
    }
}
function getKey(site,obj){          //获取key,并将key值传入数组渲染
    for(var key in site){
        var key=key;
        obj.key.push(key);
        
    }
}

newFile.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" session="false" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- 
  - Author(s): Administrator
  - Date: 2018-09-02 23:51:28
  - Description:
-->
<head>
<title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="<%= request.getContextPath() %>/common/nui/nui.js" type="text/javascript"></script>
    <script src="<%= request.getContextPath() %>/eos/js/erjiliandong.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/erjiliandong.css" />
</head>
<a  class="nui-button" onclick="clear" iconCls="icon-edit">
    销毁
</a>

<body>
        <ul id="ld">
            <ul id="ld-left">
            </ul>
            <ul id="ld-right">
            </ul>
        </ul>
    <script type="text/javascript">
        nui.parse();
        var l;
        var city={
            "name":["网站"],
            "num":['niace','aaaa'],
            "sites":[ "Google", "Runoob", "Taobao" ]     //设置数据
                }
        window.onload=function(){
            l=new liandong(city);   //实例化联动
        }
        
        function clear(){
            l.destory();
        }
    </script>
</body>
</html>

2、效果

image.png

image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • 写在前面:文章本来不是这个标题,我也不是标题党。但今天去学游泳时,教练的口号就是10分钟教会你游泳,写文章前搜索资...
    锐博Reborn阅读 49,324评论 23 233
  • UIGestureRecognizer 手势将用户物理性的触屏操作变成对象存储起来,所有手势的父类UIGestur...
    Gui晨曦遇晓阅读 401评论 0 1
  • 地震?慌都不慌,看我这波操作,先看看房子怎么说,哎,你晃任你晃,我还睡床上。床沿OB一波外面,哎,你看那些瓜皮,到...
    冰箱与麻将机阅读 186评论 0 0
  • 文/迟钝的琥珀 1. 火车偶遇“天使” 十月的凌晨有些微冷,空中飘荡着些游丝般的云,几颗星子随意地散落在夜色里。...
    迟钝的琥珀阅读 416评论 0 2