$('.select2_sample1').multiselect({
buttonClass: 'btn btn-link',
buttonWidth: '400px',
inheritClass: true,
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',
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
enableFiltering: true,
filterPlaceholder: 'Search for something...',
filterBehavior: 'value',
enableFullValueFiltering: true,
enableCaseInsensitiveFiltering: true,
includeSelectAllOption: true,
selectAllText: 'Check all!',
selectAllNumber: false,
selectAllName: 'select-all-name',
selectAllValue: 'select-all-value',
selectAllJustVisible: false,
onSelectAll: function() {
alert('onSelectAll triggered.');
},
disableIfEmpty: true,
disabledText: 'Disabled ...',
buttonWidth: '400px',
dropRight: true,
maxHeight: 400,
dropUp: true,
maxHeight: 200,
checkboxName: 'multiselect[]',
onInitialized: function(select, container) {
alert('Initialized.');
},
onChange: function (option, checked) {
console.log(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
},
onDropdownShow: function (event) {
alert('Dropdown shown.');
},
onDropdownHide: function (event) {
alert('Dropdown closed.');
},
onDropdownHidden: function (event) {
alert('Dropdown closed.');
},
});
var selectValueStr = [];
$(".select2_sample1 option:selected").each(function () {
selectValueStr.push($(this).val());
});
var set = {
enableFiltering: true,
includeSelectAllOption: true,
nonSelectedText: '全部',
nSelectedText: '个被选中',
allSelectedText: '全选',
buttonWidth: '220px',
numberDisplayed: 1000,
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;
}
var options = [];
$.getJSON('路径', {
t: Math.random
}, function (jsonData) {
if (jsonData != null) {
var data = jsonData;
$.each(data, function (r, row) {
var obj = new Object();
obj.label = row.text;
obj.title = row.text;
obj.value = row.value;
options.push(obj);
})
$('.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 () {
}
})
})
<select class="medium m-wrap select2_sample1" multiple>
</select>