复选下拉框组件
说明需求
做报表的时候,筛选条件中需要用到复选下拉框,首先说明:
- 复选框(复选框)无法满足我的需求,因为可选项有上百个,不可能都直接列在页面上
- 下拉框(选择)也无法满足,因为不支持复选
在网上找了很久,找到一个比较合适的复选框组件,效果如下:
详细网址如下:
https ://developer.snapappointments.com/bootstrap-select/
需要引入的CSS和JS,引入及位置
需要引入的文件可以从这里下载,不想费积分可以直接从这里下载,导入自己项目位置如下面图示,主要的8个文件被红框框住的就是,然后将CSS,JS引入到你的JSP即可。
具体使用实例如下,假设JSP中有如下代码:
<span>牛人学历:</span>
<span>
<select class="selectpicker" id="degree" multiple title="请选择:">
<option value="0">初中及以下</option>
<option value="1">中专/中技</option>
<option value="2">中专及以下</option>
<option value="3">中专</option>
<option value="4">大专</option>
<option value="4">本科</option>
<option value="4">硕士</option>
<option value="4">博士</option>
</select>
1取值方法
var degree = $('#degree').val()+"";
if("null" == degree || "undefined" == degree){
degree="";
}
2onclick事件获取
$('#degree').on('changed.bs.select',function(){
var level2Code = "("+$('#secondJob').val()+")";
var json = {
jobLevel:'3',
level2Code:level2Code
};
$.ajax({
type: "POST",
url: "../bireport/getJobByLevel.action",
contentType : "application/json",
dataType:"html",
data: JSON.stringify(json),
success: function(resp){
$("#thirdJob").html(resp);
$('#thirdJob').selectpicker("refresh");
},
error:function(resp){
$.messager.alert('出错了','系统出错,请联系管理员。','error');
}
});
}
);
3下拉框下拉选项内容修改
$("#degree").html("<option value="3">中专</option> <option value="4">大专</option>");
$('#degree').selectpicker("refresh");
4设置下拉框不可选
$('#degree').attr("disabled",false);
详情可看: