Bootstrap Multiselect api

• multiselect

$('.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% == ) {
                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: ,
        dropUp: true,
        //擺放在左側預設為200
        maxHeight: ,
        //見伺服器端名稱
        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.');
        },

});
           

• 擷取選中的值

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

• js代碼

//multiselect初始化
var set = {
    enableFiltering: true,//搜尋
    includeSelectAllOption: true,//全選
    nonSelectedText: '全部',//沒有值的時候button顯示值
    nSelectedText: '個被選中',//有n個值的時候顯示n個被選中
    allSelectedText: '全選',//所有被選中的時候 全選（n）
    buttonWidth: '220px',//button寬度
    numberDisplayed: ,//當超過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 () {
        }
    })
})
           

• html

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