1.引用js、css
bootstrap.css 、 bootstrap-select.min.css
bootstrap.min.js 、bootstrap-select.min.js
2. js初始化插件
$(window).on('load', function () {
// 中文重写select 查询为空提示信息
$('.selectpicker').selectpicker({
noneSelectedText: '',
noneResultsText: '',
liveSearch: true,
size:5 //设置select高度,同时显示5个值
});
});
3. jsp select 框案例,js实例初始化数据
<div class="form-group">
<label class="col-sm-2 control-label">考试科目</label>
<div class="col-sm-8">
<select class="selectpicker input-xlarge" style="outline: none;width:200px;"
data-live-search="true" id="subjectId" name="testSubject">
<option value="">请选择考试科目</option>
</select>
</div>
</div>
//通过年级id,关联科目列表
function getSubjectBysgId(stageGradeId) {
var subject_id = $("#subject_id").val();
$.ajax({
url: "${ctx}/bussstudy/bussSubject/getBussSubjectBysgId",
data: {stageGradeId: stageGradeId},
type: "POST",
success: function (data) {
if (data != null) {
var html = "<option value=''>请选择科目名称</option>";
for (var i = 0; i < data.length; i++) {
if (subject_id == data[i].subjectId) {
html += "<option value='" + data[i].subjectId + "'selected='selected'>" +
data[i].subjectName + "</option>";
} else {
html += "<option value='" + data[i].subjectId + "'>" + data[i].subjectName + "</option>";
}
}
$("#subjectId").html(html);
$('.selectpicker').selectpicker('refresh');//加载select框选择器
}
}
});
}