bootstrap-multiselect 手动触发onChange事件

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

效果截图:




你可能感兴趣的:(【Language_Web】)