1

我有一系列多选下拉控件。第一个 (users) 导致第二个 (userGroups) 在其值之一发生更改时更新，第二个 (userGroups) 导致第三个 (theaters) 更新其列表的内容。

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

我从使用过 Javascript 中知道，需要重新启动 onChange；但是，我不知道如何使用 Bootstrap 多选来做到这一点。我的代码如下：

$('.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');
                    }
                });
            }
        });
    });

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

4

1 回答 1

0

好的——我让它工作了。这是我之前在做的事情：

$.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');
    }
});

像现在这样工作。

于 2015-11-13T16:23:27.837 回答