如何实现layui下拉框加载动态数据：
首先创建一个LayuiCreateSelect()方法：
LayuiCreateSelect()有三个参数selectId、url、value
selectId: 是select标签上的ID，
url:是控制器方法，
value:是设置加载完成时所选定的值
开始写LayuiCreateSelect()方法的
首先判断selectId是否有id选择器，如果没有id选择器就进行拼接，然后用empty()移除select中的内容，包括所有文本和子节点，然后用for循环根据控制器方法查询出的数据创建option，然后对layui的form模块进行渲染，设置选定的值，代码如下：
function LayuiCreateSelect(selectId, url, value) {//value 设置加载完成时所选定的值
//数据请求
$.post(url, function (data) {
//判断id是否有"#"
if (selectId.indexOf('#') != 0) {
selectId = '#' + selectId;
}
$(selectId).empty();//清空该元素
//创建option
for (var k in data) {
$(selectId).append("<option value='" + data[k].id + "'>" + data[k].text + "</option>");
}
//使用layui下拉框的必要代码
layui.use('form', function () {
var form = layui.form;
//设置选中值
if (value != undefined && value != null && value != '') {
$(selectId).val(value);
}
form.render();//重载表单
});
});
}
调用LayuiCreateSelect()方法就可以给layui下拉框加载动态数据了，代码如下：
LayuiCreateSelect("ManagerTypeID", "selectManagerType");
如果你想回填select的数据，可以用下面的方法，代码如下：
$.post(url, { ID: ID }, function (data) {
LayuiCreateSelect("ManagerTypeID", "selectManagerType", data.ManagerTypeID);
});
控制器方法
public ActionResult selectManagerType()
{
List<SelectVo> selectList = new List<SelectVo>();
selectList.Add(new SelectVo { id = 0, text = "----请选择----" });
List<SelectVo> listManagerType = (from tbManagerType in myModel.S_ManagerType
select new SelectVo
{
id = tbManagerType.ManagerTypeID,
text = tbManagerType.ManagerTypeName
}).ToList();
//拼接“请选择”项
selectList.AddRange(listManagerType);
return Json(selectList, JsonRequestBehavior.AllowGet);
}
效果图：
