bootstrap-multiselect 手动触发onChange事件

来源:互联网 发布:创业项目ppt运营数据 编辑:程序博客网 时间:2024/06/03 22:06

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

效果截图:




原创粉丝点击