<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>