1

一連の複数選択ドロップダウン コントロールがあります。1 つ目 (users) は、値の 1 つが変更されたときに 2 つ目 (userGroups) を更新し、2 つ目 (userGroups) は 3 つ目 (theaters) のリストの内容を更新します。

最初のドロップダウン (ユーザー) の onChange イベントは正常に機能しています。ただし、2 番目 (userGroups) の onChange イベントは、値の 1 つが変更されたときに発生せず、3 番目のドロップダウン (シアター) のリストを更新しません。

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

onChange イベントが発生するように、userGroups ドロップダウンを維持する次の変更を行いました。

$.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 に答える