MVC使用bootstrap-select的插件下拉框

首先咱们要把js和css引入进来。

<link href="~/Content/bootstrap-3.3.4.css" rel="stylesheet" />
<link href="~/Content/bootstrap-select.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap-3.3.4.js"></script>
<script src="~/Scripts/bootstrap-select.js"></script>

就依赖这几个了。引用好了。

咱们就来写html吧。把下拉框写上。

<select id="id_select" name="sq_name" class="selectpicker" data-live-search="true"></select> 

 class="selectpicker"这个需要注意，因为下面的js靠这个来操作html。data-live-search="true"这段的作用是是否启用下拉框中的搜索框。

multiple 是多选。需要就加上。

写好了html然后就写js了。

<script type="text/javascript">
    $(window).on('load', function () {
        $('.selectpicker').selectpicker({});
    });
    $(function () {
       
        $.ajax({
                    type: "POST",
                    url: "GetUserList",
                    dataType: "json",
                    data:'',
                    success: function (data) {
                        var select = $("#id_select");
                    $.each(data, function (i, o) {
                        var opt = "";
                        if (o) {
                            opt = '<option value=' + o.Text + '>' + o.Text + '</option>';

                        } else {
                            opt = '<option value="">' + o.Text + '</option>';
                        }
                        select.append(opt);
                    });
                    $('.selectpicker').selectpicker('refresh');
                }, error: function () {
                }
             });

    })
</script>

开始是初始化下拉框。

然后ajax请求。前四个参数中的url就是你后台要请求的方法。success里面有 var select = $("#id_select");就是下拉框的id，当然也可以直接用class。

接下来到了后台代码的部分了，我操作数据库用的EF。

[HttpPost]
        public JsonResult GetUserList()
        {
            List<UserTable> ut = db.UserTable.ToList();
            List<SelectListItem> sl = new List<SelectListItem>();
            foreach (var item in ut)
            {
                SelectListItem s = new SelectListItem();
                s.Value = item.ID.ToString();
                s.Text = item.Name;
                sl.Add(s);
            }
            return Json(sl,JsonRequestBehavior.AllowGet);
        }

function (i, o)里面o就是后台来的json数据。

扫描二维码关注公众号，回复： 1580362 查看本文章

 $('.selectpicker').selectpicker('refresh');是刷新下拉框。

好了，到这里就成功了。

哦，不对，还有回显。

$('.selectpicker').selectpicker('val','mustard');

mustard，就是value。单选的。

然后在调用刷新。

然后是多选的回显。

var mycars = new Array("001", "002", "003");
$('.selectpicker').selectpicker('val', mycars);

调用刷新。

最后附上http://silviomoreto.github.io/bootstrap-select/examples/  官方文档

好了大功告成。打完收工。