本文主要是介绍Bootstrap Multiselect api，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- multiselect
$('.select2_sample1').multiselect({buttonClass: 'btn btn-link',//显示按钮stylebuttonWidth: '400px',//按钮宽度inheritClass: true,//继承原来select的button的classbuttonContainer: '<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显示4selectedenableClickableOptGroups: true,//同时取组或者allenableCollapsibleOptGroups: 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显示allselectselectAllName: 'select-all-name',selectAllValue: 'select-all-value',//可以为strig或者数字selectAllJustVisible: false,//选择所有的。true为全选可见的onSelectAll: function() {alert('onSelectAll triggered.');},disableIfEmpty: true,//没有选项时readonlydisabledText: 'Disabled ...',//disabled时显示的文字说明//下拉选项摆放在右侧buttonWidth: '400px',dropRight: true,//下拉选项摆放在顶部maxHeight: 400,dropUp: true,//摆放在左侧默认为200maxHeight: 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.');},});
- 获取选中的值
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,//当超过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>这篇关于Bootstrap Multiselect api的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
