Question

我有一系列多选下拉控件。第一个（用户）导致第二个（userGroups）在其中一个值发生更改时更新，而第二个（userGroups）导致第三个（用户组）更新其列表内容。

第一个下拉列表（用户）的onChange事件工作正常。但是，第二个（userGroups）onChange事件在其中一个值发生更改时不会触发，从而不会更新第三个下拉列表（剧院）。

我知道从使用Javascript开始，onChange需要重新启动;但是，我不知道如何使用Bootstrap multiselect进行此操作。我的代码如下：

$('.users').multiselect({
            numberDisplayed: 1,
            maxHeight: 400,
            includeSelectAllOption: false,
            enableCaseInsensitiveFiltering: true,
            filterBehavior: 'both',
            disableIfEmpty: true,
            onChange: function (element, checked) {
                var userName = $('.users').val();

                if (userName != null) {
                    userName = userName.toString();
                }

                $.ajax({
                    url: '@Url.Action("LoadUserGroups")',
                    data: { "userName": userName },
                    success: function (data) {
                        $('.userGroups').multiselect('destroy');
                        $('.userGroups').replaceWith($(data));
                        $('.userGroups').multiselect('rebuild');
                    },
                    error: function (xhr) {
                        $('.userGroups').multiselect('destroy');
                        $('.userGroups').multiselect('rebuild');
                    }
                });

            }
        });

        $('.userGroups').multiselect({
            numberDisplayed: 1,
            maxHeight: 400,
            includeSelectAllOption: false,
            enableCaseInsensitiveFiltering: true,
            filterBehavior: 'both',
            disableIfEmpty: true,
            onChange: function (element, checked) {
                javascript: console.log("OnChange event fired");

                var groupId = $('.userGroups').val();

                if (groupId != null) {
                    groupId = groupId.toString();
                }

                $.ajax({
                    url: '@Url.Action("LoadTheaters")',
                    data: { "groupId": groupId },
                    success: function (data) {
                        $('.theaters').multiselect('destroy');
                        $('.theaters').replaceWith($(data));
                        $('.theaters').multiselect('rebuild');
                    },
                    error: function (xhr) {
                        $('.theaters').multiselect('destroy');
                        $('.theaters').multiselect('rebuild');
                    }
                });
            }
        });
    });

如果有人能告诉我如何做到这一点或者至少指出我正确的方向，我将非常感激。提前谢谢。

Answer 1

好的 - 我让它上班了。以下是我以前做的事情：

$.ajax({
    url: '@Url.Action("LoadUserGroups")',
    data: { "userName": userName },
    success: function (data) {
        $('.userGroups').multiselect('destroy');
        $('.userGroups').replaceWith($(data));
        $('.userGroups').multiselect('rebuild');
    },
    error: function (xhr) {
        $('.userGroups').multiselect('destroy');
        $('.userGroups').multiselect('rebuild');
    }
});

我做了以下更改，维护了userGroups下拉列表，因此会触发onChange事件：

$.ajax({
    url: '@Url.Action("LoadUserGroups")',
    data: { "userName": userName },
    success: function (data) {
        $('.userGroups').empty();
        $('.userGroups').append($(data).find('option'));
        $('.userGroups').multiselect('rebuild');
    },
    error: function (xhr) {
        $('.userGroups').empty();
        $('.userGroups').multiselect('rebuild');
    }
});

现在应该这样工作。

为Bootstrap multiselect重新启动onChange事件

1 个答案: