layui搜索下拉框数据的动态绑定

前台页

HTML样式

<div class="layui-input-inline">
            <select name="modules" id="nameselect" lay-search="" lay-verify="required">
               
            </select>
 </div>

js代码

function LayuiCreateSelect(selectId, url, value) {//value  设置加载完成时所选定的值
        //数据请求
        $.post(url, function (optionList) {
            //判断id是否有"#"
            if (selectId.indexOf('#') != 0) {
                selectId = '#' + selectId;
            }
            $(selectId).empty();//清空该元素
            //创建option
            for (var k in optionList) {
                $(selectId).append("<option value='" + optionList[k].Id + "'>" + optionList[k].Name + "</option>");
            }
            //使用layui下拉框的必要代码
            layui.use('form', function () {
                var form = layui.form;
                //设置选中值
                if (value != undefined && value != null && value != '') {
                    $(selectId).val(value);
                }
                form.render();//重载表单
            });
        });

方法调用

LayuiCreateSelect("nameselect", "/Component/SearchList");

后台页

首先创建一个数据模型

public class Option
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public Option(int id,string name)
        {
            Id = id;
            Name = name;
        }
    }

public ActionResult SearchList()
        {
            //从数据库查询语句
            var componentlist = baseBLL.GetEntities(x => x.IsDelete != 1);
            Option opt = new Option(0, "请选择");
            List<Option> optionList = new List<Option>();
            optionList.Add(opt);
            foreach(var item in componentlist)
            {
                Option option = new Option(item.ComponentID, item.ComponentName);
                optionList.Add(option);
            }
            return Json(optionList, JsonRequestBehavior.AllowGet);
        }