bootstrap-multiselect 手动触发onChange事件

时间:2021-12-24 15:03:53

我们用bootstrap-multiselect去渲染select选项后,必须要手动改变选项才会触发 onChange 的回调函数,但是有时候我们需要在代码中进行触发onChange的回调函数。

开始想的很简单,不就是改变select选项的值,然后 trigger("change") 吗 ,然而并没有有效果。

然后网上各种找,还是没找到。行!没找到就看源码,我想插件肯定有考虑的这个问题。后面果然在插件中找到了相关 源码:

/**
* Select all options of the given values.
*
* If triggerOnChange is set to true, the on change event is triggered if
* and only if one value is passed.
*
* @param {Array} selectValues
* @param {Boolean} triggerOnChange
*/
select: function(selectValues, triggerOnChange) {
if(!$.isArray(selectValues)) {
selectValues = [selectValues];
}

for (var i = 0; i < selectValues.length; i++) {
var value = selectValues[i];

if (value === null || value === undefined) {
continue;
}

var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value);

if($option === undefined || $checkbox === undefined) {
continue;
}

if (!this.options.multiple) {
this.deselectAll(false);
}

if (this.options.selectedClass) {
$checkbox.closest('li')
.addClass(this.options.selectedClass);
}

$checkbox.prop('checked', true);
$option.prop('selected', true);

if (triggerOnChange) {
this.options.onChange($option, true);
}
}

this.updateButtonText();
this.updateSelectAll();

if (this.options.enableClickableOptGroups && this.options.multiple) {
this.updateOptGroups();
}
},
找到源码就简单了,举例子如下:

$("#example-multi1").multiselect({
//url:path+"/admin/demo/operdata/data.json",
numberDisplayed: 100,
includeSelectAllOption: true,
selectAllText: '选择全部',
enableFiltering: true,
buttonWidth: '100%',
maxHeight: 300,
onDropdownHide:function(){
var ids="";
var texts = '';
var values = '';
$('#example-multi1 option:selected').each(function() {
texts += $(this).text() + ', ';
values+=$(this).val() + ', ';
ids+=$(this).attr("id");
});
},
onChange:function(){
console.log("onChange事件被触发");
}
});
var dataArr = [{label:'AAA',value:'aaa'},{label:'BBB',value:'bbb'}];
$("#example-multi1").multiselect('dataprovider',dataArr);
用下面方式进行手动触发onChange事件,注意第三个选项必须为true,如果没有或者不是的话,就之后改变select选项的值不会触发onChange的回调函数。

$("#example-multi1").multiselect("select",["aaa"],true);

效果截图:

bootstrap-multiselect 手动触发onChange事件