原生JS實現二級聯動

weixin_34107955發表於2018-09-24
JS

1、程式碼


5131080-d1687ccd5a3e410f.png
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、效果

5131080-ed5f3e2a3f86f596.png
image.png

5131080-e10941a7ac4f9cf0.png
image.png

相關文章