使用layui的的下拉框并回填和开启搜索

一、完成HTML布局并开启搜索功能
开启layui下拉框的搜索功能很简单，只需要设定属性lay-search即可开启。

  <div class="layui-inline">
       <label class="layui-form-label">用户类型</label>
       <div class="layui-input-inline">
              <select id="UserTypesID" lay-search></select>
        </div>
  </div>

二、查询出数据并绑定
1.新建一个实体类SelectVo，id用来接收查询出来的数据的ID，text用来接收下拉框需要显示的文本。

  public class SelectVo
    {
        /// <summary>
        /// 选中值
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 显示值
        /// </summary>
        public string text { get; set; }
        
    }

2.查询出数据库中的数据：
先声明一个实体类selectVo集合selctList，然后在数据库中查询出下拉框要显示的数据，id为表格的主键，text为要显示的文本。

    public ActionResult SelcetUserTypes()
        {
            List<SelectVo> selctList = new List<SelectVo>();
            try
            {

                selctList = myModels.SYS_UserTypes
                            .Select(n => new SelectVo
                            {
                                id = n.UserTypesID,
                                text = n.UserTypes.Trim()
                            }).ToList();
            }
            catch (Exception)
            {
                selctList.AddRange(selctList);
            }
            return Json(selctList, JsonRequestBehavior.AllowGet);
        }

3.新建一个方法layuiSelect并建立三个参数：selectId:要绑定的下拉框的id；url：查询数据的路径；value：要回填的数据。利用ajax的方法来异步传递数据。url为传入的url。在ajax请求成功后的回调函数success中来处理数据。判断传入的selectId是否存在“#”，不存在就将“#”加入传入的selectId中。将下拉框清空，为防止存在之前残留的数据。设置下拉框的第一个选项为空。遍历循环传过来的数据data，将数据的text和id都返回到下拉框的菜单中。设置选中的值：判断第三个参数value是否为null、undefined和’’，如果不是，则说明存在选中的值，直接用jQuery设置其值就好了。使用layui的下拉框如果只是写到这里下拉框的数据数不会显示出来的。因为layui将下拉框重新渲染了一遍。因此，使用layui的下拉框需要使用layui.from.render(“select”)重新渲染一次。

        //layui创建下拉框
        function layuiSelect(selectId, url, value) {
            $.ajax({
                url: url,
                dataType: 'json',
                type: 'post',
                success: function (data) {
                    if (selectId.indexOf('#') != 0) {
                        selectId = '#' + selectId;
                    }
                    $(selectId).empty();
                    $(selectId).append(new Option("", 0));
                    $.each(data, function (index, item) {
                        $(selectId).append(new Option(item.text, item.id));// 下拉菜单里添加元素
                    });
                    //设置选中值
                    if (value != undefined && value != null && value != '') {
                        $(selectId).val(value);
                    }
                    layui.form.render("select");
                    //重新渲染 固定写法
                }
            })
        }

4.调用方法创建下拉框菜单
在需要使用下拉框的地方之间调用之前创建的方法，按照方法传入参数。若下拉框不需要设置其选中的值，第三个参数可以不传入。

 //绑定用户类型下拉框
 layuiSelect("userTypesID", "@Url.Content("~")EssentialInformation/MentorInfoImport/SelcetUserTypes", checkStatus.data[0].UserTypesID);