js 二级联动

          <select name="provid" id="A1" lay-filter="provid">
                <option value="">请选择省</option>
                <option value="110000" selected="selected">北京</option>
                <option value="120000">天津</option>
                <option value="130000">河北省</option>
                <option value="140000">山西省</option>
                <option value="700000">港澳台地区</option>
            </select>
layui  自动生成
 
绑定事件
layui.use('form', function () {
            var form = layui.form;
            form.on('select(A1)', function (data) {  //绑定改变事件
                alert("0000"); //绑定不到
            })
            form.on('select(provid)', function (data) {  //绑定改变事件
                alert("111"); //----ok
            })
   });




    //二级联动返回的json
    public class Two_level_linkage
    {
        public Two_leavel_head head { get; set; }
        public List<Two_leavel_head> items { get; set; }
    }
    public class Two_leavel_head
    {
        public int id { get; set; }
        public string name { get; set; }
}
List 控制器
              var busitype_list = busiTypesdb.GetList();
            var hFeven_list = hFEventInfodb.GetList();
            List<Two_level_linkage> list = new List<Two_level_linkage>();
            for (int i = 0; i < busitype_list.Count; i++)
            {
                Two_level_linkage mode = new Two_level_linkage();
                mode.head = new Two_leavel_head();
                mode.items = new List<Two_leavel_head>();
                mode.head.id = busitype_list[i].BusiTypesID;
                mode.head.name = busitype_list[i].BusiTypesName;
                for (int j = 0; j < hFeven_list.Count; j++)
                {
                    if (busitype_list[i].BusiTypesID == hFeven_list[j].BusiTypeID)
                    {
                        Two_leavel_head modeL = new Two_leavel_head();
                        modeL.id = hFeven_list[j].HFEventId;
                        modeL.name = hFeven_list[j].HFEventName;
                        mode.items.Add(modeL);
                    }
                }
                list.Add(mode);
            }
            ViewBag.Content = JsonHelper.GetJson(list);  //[] //[{"city":null,"name":"123"}]



Js 解析
layui.use('form', function () {
            var form = layui.form;
            form.on('select(provid_A1)', function (data) {  //绑定改变事件
                var B1 = document.getElementById("B1");
                B1.innerHTML = "";
                var C1 = document.getElementById("list_busi").value;
                var ob = JSON.parse(C1);
                var t = this.getAttribute("lay-value");
                bind_data(t);
            })



        });
        //-----------bgin----------------------
        var obj_data;
        //初始化数据 联动
        function bind_data(index) {
            if (!index) {
                //获得数据
                var C1 = document.getElementById("list_busi").value;
                var ob = JSON.parse(C1);
                obj_data = ob;

                var i = 0; j = 0;
                var sb = new StringBuilder();
                for (; i < ob.length; i++) {
                    if (i == 0) //默认选择第一个
                    {
                        sb.appendFormat('<option value="{0}" selected="selected">{1}</option>', ob[i].head.id, ob[i].head.name);
                        inset_html("B1", get_child(ob[i].head.id, obj_data));
                        continue;
                    }
                    sb.appendFormat('<option value="{0}">{1}</option>', ob[i].head.id, ob[i].head.name);
                }
                inset_html("A1", sb.toString());
            } else {
                inset_html("B1", get_child(index, obj_data));
            }
            //插入数据
            function inset_html(id, content) {
                if (!content) {
                    content = '<option value="">无数据</option>';
                };
                document.getElementById(id) && (document.getElementById(id).innerHTML = content);
            }
            //获得子项内容
            function get_child(id, ob) {
                var i = 0; j = 0;
                var sb = new StringBuilder();
                for (; i < ob.length; i++) {
                    if (id == ob[i].head.id) {
                        for (; j < ob[i].items.length; j++) {
                            if (j == 0) {
                                sb.appendFormat('<option value="{0}" selected="selected">{1}</option>', ob[i].items[j].id, ob[i].items[j].name);
                                continue;
                            }
                            sb.appendFormat('<option value="{0}" >{1}</option>', ob[i].items[j].id, ob[i].items[j].name);
                        }
                        break;
                    }
                }
                return sb.toString();
            }

            var form = layui.form;
            form.render();
        }
     //--------end---------------------

<html>

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                .layui-table-edit {
                    display: block; /*转为块状元素*/
                    /*设置边框*/
                    border-width: 1px;
                    border-style: solid;
                    border-color: #e6e6e6;
                    border-radius: 0;
                    box-sizing: border-box; /*设置边框样式*/
                    outline: 0; /*轮廓(位于边框的外围)*/
                    box-shadow: 1px 1px 20px rgba(0,0,0,.15);/*向框添加阴影*/
                    /*设置背景*/
                    background-color: #fff;
                    /*设置行高*/
                    line-height: 1.3;
                    /*延迟改变元素属性*/
                    -webkit-transition: all 0.3s;
                    -webkit-appearance: none; /*去除系统默认appearance的样式,*/
                    /*position: absolute;
                    left: 0;
                    top: 0;*/
                    /*设置宽高*/
                    width: 100%;
                    height: 100%;
                    /*设置内边距*/
                    padding: 0 14px 1px;
                }
                .layui-input:hover, .layui-textarea:hover { /*鼠标指针悬浮*/
                    border-color: #D2D2D2 !important
                }
 /*
获得焦点
       .layui-input:focus, .layui-textarea:focus {
        border-color: #009688 !important
                }
 */     

 /*小箭头样式*/  
 .layui-form-select .layui-edge {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    cursor: pointer;
    border-width: 6px;
    border-top-color: #c2c2c2;
    border-top-style: solid;
    transition: all .3s;
    -webkit-transition: all .3s
}
.layui-edge {
    position: absolute;
    width: 0;
    height: 0;
    border-style: dashed;
    border-color: transparent;
    overflow: hidden
}
.linkage-selected .layui-edge {
    margin-top: -9px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-top: -3px9;
}
.linkage-selected  dl {
    display: block !important;
}
/*联动输入框样式*/
    .linkage input{
        padding-right: 30px;
        cursor: pointer;
    }
/*输入框下的dl样式*/
.linkage dl {
    display: none;

    left: 0;
    top: 42px;
    padding: 5px 0;
    z-index: 999;
    min-width: 100%;
    border: 1px solid #d2d2d2;
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    box-sizing: border-box
}
.linkage dl dd.layui-select-tips {
    padding-left: 10px!important;
    color: #999;
}
.linkage dl dd.layui-this {
    background-color: #5FB878;
    color: #fff;
}
.linkage dl dd {
    cursor: pointer;
}
.linkage dl dd:hover {
    background-color: #f2f2f2;
}
.linkage dl dd.layui-this:hover
{
    background-color: #5FB878;
}
.linkage dl dd{
    padding: 0 10px;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
dl dd{
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

</style>
    </head>
    <body>
        <div>
                <select name="provid" id="provid" lay-filter="provid">
                    <option value="">请选择省</option>
                    <option value="110000" selected="selected">北京</option>
                    <option value="120000">天津</option>
                    <option value="130000">河北省</option>
                    <option value="140000">山西省</option>
                    <option value="700000">港澳台地区</option>
                </select>
        </div>
        <div class="sheng linkage" style="200px;" >
            <div id="sheng" class="layui-form-select" style="position: relative;height:38px;">
                <input type="text" placeholder="请选择省" value="北京" readonly="" class="layui-input layui-table-edit">
                <i class="layui-edge"></i>
            </div>
            <dl>
                <dd lay-value="" class="layui-select-tips">请选择省</dd>
                <dd lay-value="110000" class="layui-this">北京</dd>
                <dd lay-value="120000" class="">天津</dd>
                <dd lay-value="130000" class="">河北省</dd>
                <dd lay-value="140000" class="">山西省</dd>
                <dd lay-value="150000" class="">内蒙古自治区</dd>
                <dd lay-value="210000" class="">辽宁省</dd>
                <dd lay-value="220000" class="">吉林省</dd>
                <dd lay-value="230000" class="">黑龙江省</dd>
                <dd lay-value="310000" class="">上海</dd>
                <dd lay-value="650000" class="">新疆维吾尔自治区</dd>
                <dd lay-value="700000" class="">港澳台地区</dd>
                <dd lay-value="120000" class="">天津</dd>
                <dd lay-value="130000" class="">河北省</dd>
                <dd lay-value="140000" class="">山西省</dd>
                <dd lay-value="150000" class="">内蒙古自治区</dd>
                <dd lay-value="210000" class="">辽宁省</dd>
                <dd lay-value="220000" class="">吉林省</dd>
                <dd lay-value="230000" class="">黑龙江省</dd>
                <dd lay-value="310000" class="">上海</dd>
                <dd lay-value="650000" class="">新疆维吾尔自治区</dd>
                <dd lay-value="700000" class="">港澳台地区</dd>
            </dl>
            </div>
        <script>
        var  sheng =  document.getElementById("sheng");
        var  falge =0;
        sheng.onclick = function()
        {
            if(this.parentNode.classList.contains('linkage-selected')){   //检查类
                this.parentNode.classList.remove("linkage-selected");  //添加类
            }else{
                this.parentNode.classList.add("linkage-selected");
            }
        }
        //dd下的单击事件
        var sheng_dds =  sheng.parentNode.getElementsByTagName("dl")[0].children;
        for(var i=1;i<sheng_dds.length;i++)
        {
            sheng_dds[i].onclick = function()
            {
                console.log(this.innerText);
            }
        }
        

 


        </script>
    </body>
</html>

---