bootstrap-multiselect 手动触发onChange事件

川长思鸟来 2022-06-12 03:13 651阅读 0赞

我们用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);**

效果截图：

![Center][]

[Center]: /images/20220612/37e76198cf104fc79edc7d4e07ccd59b.png