Reinitialze onChange event for Bootstrap multiselect

我有一系列多選下拉控件。第一個（用戶）導致第二個（userGroups）在其中一個值更改時更新，而第二個（userGroups）導致第三個（劇院）更新其列表的內容。Reinitialze onChange event for Bootstrap multiselect

第一個下拉列表（用戶）的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'); 
 
        } 
 
       }); 
 
      } 
 
     }); 
 
    });

如果有人能告訴我如何做到這一點，或至少點我在正確的方向，我將非常感激。提前致謝。

來源

2015-11-12 Greg Busby

好的 - 我得到它的工作。這裏是之前我在做什麼：

$.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事件將火：

$.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-13 16:23:27

Reinitialze onChange event for Bootstrap multiselect

回答

相關問題