1.前台直接绑定
<link rel="stylesheet" href="dist/css/bootstrap.min.css"> <link rel="stylesheet" href="dist/css/bootstrap-select.css"> <script src="dist/js/jquery-2.1.4.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> <script src="dist/js/bootstrap-select.js"></script> <div class="form-group" > <label class="control-label col-sm-2" for="teacher">教师:</label> <div class=" col-sm-9"> <select size="1" name="teacher" id="teacher" class="selectpicker select" data-live-search="true"> <option value="">请选择教师</option> @{ foreach (var teach in ViewBag.teacherlist) { <option value="@teach.id" data-username="@teach.username" data-userid="@teach.user_id" data-userrealname="@teach.realname_cn">@teach.realname_cn|@teach.username</option> } } </select> </div> </div>
2.效果
3.后台动态加载绑定
<div class="col-sm-3" style="min-height: 40px;"> <select size="1" name="teacherid" id="teacherid" class="selectpicker select" data-live-search="true" onchange="InitTeacherTableInfo()"> @*<option value="">选择老师</option>*@ </select> </div> function InitTeacherInfo(isown, defaulttext, defaultselectid) { var defaultstatus = ""; if (isown) { defaultstatus = "disabled"; } var objteacherId = $("#teacherid"); var objSelectId = $("#selectid").val(); if (objSelectId == null || objSelectId == "") { objteacherId.empty(); if (defaultselectid == "") { objteacherId.append("<option value='' selected " + defaultstatus + " >" + defaulttext + "</option>"); } else { objteacherId.append("<option value='' " + defaultstatus + " >" + defaulttext + "</option>"); } objteacherId.selectpicker("refresh"); return; } if (objSelectId != '') { $.ajax({ type: "POST", url: "/TeacherCourseTable/GetTeacherInfo", data: { selectId: objSelectId }, datatype: "json", async: false, cache: false, success: function (data) { if (data.d != null) { var teacherInfo = data.d; if (teacherInfo.length > 0) { objteacherId.empty(); if (defaultselectid == "") { objteacherId.append("<option value='' selected " + defaultstatus + " >" + defaulttext + "</option>"); } else { objteacherId.append("<option value='' " + defaultstatus + " >" + defaulttext + "</option>"); } var optGroup = "" for (var i = 0; i < teacherInfo.length; i++) { if (i == 0) { optGroup += "<option value='" + teacherInfo[i].teacher_id + "' selected >" + teacherInfo[i].teacher_name + "</option>"; } else { optGroup += "<option value='" + teacherInfo[i].teacher_id + "'>" + teacherInfo[i].teacher_name + "</option>"; } } objteacherId.append(optGroup); objteacherId.selectpicker("refresh"); } InitTeacherTableInfo(); } }, error: function () { showErrorTips("网络错误"); } }); } }
初始化: $('#teacher').selectpicker('refresh');
搜索 : data-live-search="true"
官网:https://silviomoreto.github.io/bootstrap-select/