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

发布时间：2020-12-17 20:52:31 所属栏目：安全来源：网络整理

导读：首先咱们要把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

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

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

咱们就来写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数据。

?$(‘.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/? 官方文档

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!