复选下拉框组件

说明需求
做报表的时候,筛选条件中需要用到复选下拉框,首先说明:

  1. 复选框(复选框)无法满足我的需求,因为可选项有上百个,不可能都直接列在页面上
  2. 下拉框(选择)也无法满足,因为不支持复选

在网上找了很久,找到一个比较合适的复选框组件,效果如下:

复选下拉框组件详细网址如下:
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);

详情可看:

https://developer.snapappointments.com/bootstrap-select/