layui绑定联动下拉框

 

1、html定义区域

<div class="layui-inline" id="syslist" >
</div>

2、定义加载方法

var selectIDc  //全局变量获取数据
$.ajax({
async: false,
type: "POST",
url: "url",
data: {},
dataType: "JSON",
beforeSend: function () {
var indexss = layer.msg('加载中', {
icon: 16
, shade: 0.5
});
console.log(indexss)
},
success: function (d) {

selectIDc = d.Data;
//console.log(escape(JSON.stringify(d.Data)));

layui.use('laytpl', function () {
var laytpl = layui.laytpl;
var getTpl = T_SYSTEM.innerHTML   //T_SYSTEM 定义下拉框 id
, view = document.getElementById('syslist');
laytpl(getTpl).render(selectIDc, function (html) {
view.innerHTML = html;
renderForm();
});
});
}, complete: function () {
layer.close(indexss);

}, fail: function () {
layer.msg("加载失败，请检查网络");
}
});

 3、绑定数据

 我的一级二级数据全部放到一个dataTable中了，这样就不用反复请求接口了，自行定义

数据返回样式

{
"Code": 0,
"Msg": "获取成功！",
"Data": [
{
"ID": 0,
"Name": "全部",
"Type": 0,
"FatherID": 0,
"Selected": 0
},
{
"ID": 6,
"Name": "人大履职APP",
"Type": 1,
"FatherID": 5,
"Selected": 0
},
{
"ID": 7,
"Name": "人大履职信息管理系统PC端",
"Type": 1,
"FatherID": 5,
"Selected": 0
},
{
"ID": 8,
"Name": "新增履职",
"Type": 2,
"FatherID": 6,
"Selected": 0
},
{
"ID": 9,
"Name": "修改履职",
"Type": 2,
"FatherID": 7,
"Selected": 0
},
{
"ID": 10,
"Name": "登录",
"Type": 2,
"FatherID": 6,
"Selected": 0
},
{
"ID": 11,
"Name": "登录",
"Type": 2,
"FatherID": 7,
"Selected": 0
}
],
"Count": 0
}

<script type="text/html" id="T_SYSTEM">
<label class="layui-form-label">系统</label>
<div class="layui-input-inline" style="width:100px">
<select id="system" lay-filter="jselect" >
{{# layui.each(d,function(index,item){}}
{{# if(item.FatherID==0 || item.FatherID==5){}}
<option value="{{item.ID}}" {{item.Selected==1?'selected':''}}>{{item.Name}}</option>
{{#}}}
{{#});}}
</select>
</div>
<label class="layui-form-label">模块</label>
<div class="layui-input-inline" style=" width:100px">
<select  id="module">
{{# layui.each(d,function(index,item){}}
{{# if((item.FatherID ==0 || item.Selected==1)&& item.FatherID!=5){}}
<option value="{{item.ID}}">{{item.Name}}</option>
{{#}}}
{{#});}}
</select>
</div>
</script>

 

4、实现联动效果 注意 jselect

 

form.on("select(jselect)", function (obj) {
//console.log(obj);
//console.log(selectIDc);
for (var i = 0; i < selectIDc.length; i++) {
if (selectIDc[i].FatherID == obj.value || selectIDc[i].ID == obj.value) {
selectIDc[i].Selected = 1;
} else {
selectIDc[i].Selected = 0;
}
}
//console.log(selectIDc);
layui.use('laytpl', function () {
var laytpl = layui.laytpl;
var getTpl = T_SYSTEM.innerHTML
, view = document.getElementById('syslist');
laytpl(getTpl).render(selectIDc, function (html) {
view.innerHTML = html;
renderForm();
});
});

})

 这样就Ok啦

转载于:https://www.cnblogs.com/shiguanghui/p/11424482.html