Bootstrap Multiselect的使用

Demo：

http://davidstutz.github.io/bootstrap-multiselect/

代码：

https://github.com/ehynds/jquery-ui-multiselect-widget

 

HTML页面代码：

<select class="medium m-wrap select2_sample1"   multiple>
</select>

JS代码：

$('.select2_sample1').multiselect({
        buttonClass: 'btn btn-link',//显示按钮style
        buttonWidth: '400px',//按钮宽度
        inheritClass: true,//继承原来select的button的class
        buttonContainer: '<div class="btn-group" />',//承载按钮和下拉框
        selectedClass: 'multiselect-selected',//选中项样式
        optionClass: function(element) {
            var value = $(element).val();
 
            if (value%2 == 0) {
                return 'even';
            }
            else {
                return 'odd';
            }
        },
        optionLabel: function(element) {
            return $(element).html() + '(' + $(element).val() + ')';
        },
        buttonWidth: '150px',//选中内容长度超过150显示4selected
        enableClickableOptGroups: true,//同时取组或者all
        enableCollapsibleOptGroups: true,//组可折叠
        enableFiltering: true,//过滤
        filterPlaceholder: 'Search for something...',
        filterBehavior: 'value',//根据value或者text过滤
        enableFullValueFiltering: true,//能否全字匹配
        enableCaseInsensitiveFiltering: true,//不区分大小写
        includeSelectAllOption: true,//全选
        selectAllText: 'Check all!',//全选的checkbox名称
        selectAllNumber: false,//true显示allselect（6）,false显示allselect
        selectAllName: 'select-all-name',
        selectAllValue: 'select-all-value',//可以为strig或者数字
        selectAllJustVisible: false,//选择所有的。true为全选可见的
        onSelectAll: function() {
            alert('onSelectAll triggered.');
        },
        disableIfEmpty: true,//没有选项时readonly
        disabledText: 'Disabled ...',//disabled时显示的文字说明
        //下拉选项摆放在右侧
        buttonWidth: '400px',
        dropRight: true,
        //下拉选项摆放在顶部
        maxHeight: 400,
        dropUp: true,
        //摆放在左侧默认为200
        maxHeight: 200,
        //见服务器端名称
        checkboxName: 'multiselect[]',
        //初始化
        onInitialized: function(select, container) {
            alert('Initialized.');
        },
        onChange: function (option, checked) {//change事件改变 
            console.log(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
        },
        //下拉回调函数
        onDropdownShow: function (event) {
            alert('Dropdown shown.');
        },
        //下拉框关闭回调函数
        onDropdownHide: function (event) {
            alert('Dropdown closed.');
        },
        //点击select调用，然后显示出下拉框
        onDropdownHidden: function (event) {
            alert('Dropdown closed.');
        },
 
});

获取选中的值的JS方法

var selectValueStr = [];
$(".select2_sample1 option:selected").each(function () {
    selectValueStr.push($(this).val());
});

 

使用Ajax方式获取option

//multiselect初始化
var set = {
    enableFiltering: true,//搜索
    includeSelectAllOption: true,//全选
    nonSelectedText: '全部',//没有值的时候button显示值
    nSelectedText: '个被选中',//有n个值的时候显示n个被选中
    allSelectedText: '全选',//所有被选中的时候 全选（n）
    buttonWidth: '220px',//button宽度
    numberDisplayed: 1000,//当超过1000个标签的时候显示n个被选中
    selectAllText: '全选',
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown" style="text-align:center;background-color: #ffffff;border: 1px solid #e5e5e5;"><span class="multiselect-selected-text"></span></button>',
        ul: '<ul class="multiselect-container dropdown-menu" style="max-height: 200px;overflow-x: hidden;overflow-y: auto;-webkit-tap-highlight-color: rgba(0,0,0,0);"></ul>',
        filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
        filterClearBtn: '<span class="input-group-btn"></span>',
        li: '<li><a tabindex="0"><label style="margin-left:20%;"></label></a></li>',
        divider: '<li class="multiselect-item divider"></li>',
        liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
    }
};
$eventSelect = $('.select2_sample1').multiselect(set);
 
//获取值
var getSelected = function () {
    var selectValueStr = [];
    $(".select2_sample1 option:selected").each(function () {
        selectValueStr.push($(this).val());
    });
    return selectValueStr;
}
 
//getjson动态更新multiselect内容
var options = [];
$.getJSON('路径', {
    //参数
    t: Math.random
}, function (jsonData) {
    if (jsonData != null) {
        var data = jsonData;
        $.each(data, function (r, row) {
            //json转成option格式
            var obj = new Object();
            obj.label = row.text;
            obj.title = row.text;
            obj.value = row.value;
            options.push(obj);
        })
        //更新multiselect
        $('.select2_sample1').multiselect('dataprovider', options);
    }
})
 
//将已选中的值进行传递
$eventSelect.on("change", function () {
    $.ajax({
        url: "url",
        dataType: "json",
        type: "POST",
        traditional: true,
        data: {
            data: getSelected(),
            t: Math.random
        },
        success: function () {
        }
    })
})