Reinitialze onChange event for Bootstrap multiselect

Question

У меня есть серия элементов управления выпадающего меню. Первый (пользователи) заставляет второй (userGroups) обновлять, когда одно из его значений изменено, а второе (userGroups) заставляет третью (театры) обновлять содержимое своего списка.

Событие 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'); 
 
        } 
 
       }); 
 
      } 
 
     }); 
 
    });

Если кто-то может показать мне, как это сделать, или, по крайней мере мне точку в правильном направлении, я бы очень признателен. Заранее спасибо.

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

Работает так, как сейчас.