当选择另一个下拉列表更改时，如何在drowdown列表中重新加载jQuery multiselect

Question

我已经尝试了在这个论坛中提出的一些解决方案，但是他们没有工作，所以我觉得我在某处遗漏了一些东西。

我在两个下拉列表（ProductCategories和Products）上使用Patrick Springstubbe jQuery multiselect。

我希望产品列表能够根据ProductCategories multiselect中选择的内容进行更改。

我正在使用的代码如下： -

  $("#ProductCategory").change( function () { $("#leftlist").empty(); $("#ProductCategory").children("option:selected").each(function () { ResetLeftList(($(this).val())); }); $('#leftlist').multiselect( 'reload' ); }); 

 function ResetLeftList(ProductCategoryID) { //Get list of food for categoryID $.ajax ({ url: "http://example.com/index.php?id=18", data: { PostProductCategoryID: ProductCategoryID }, method: "post", success: function(result) { var trimmedresult = result.substring(3, result.length - 4); var newOptions = trimmedresult.split(";"); for (i = 0; i < newOptions.length; i++) { var option = newOptions[i].split(","); $("#leftlist").append($("<option></option>").attr("value", option[0]).text(option[1])); } } }); } 

问题： - 产品多选不会更新

观察： - 在Web浏览器上使用开发人员工具我可以看到产品列表中的选项列表正在按预期更改。 如果我删除$("#leftlist").empty(); 产品多列表基于类别列表中先前选择的选项进行更新。 似乎$('#leftlist').multiselect( 'reload' )在产品列表中的选项更改之前触发。

Answer 1

你是对的“$（'＃leftlist'）。multiselect（'reload'）在产品列表中的选项更改之前触发。”

jQuery.ajax执行异步HTTP（Ajax）请求。

这意味着在调用$ .ajax（）之后代码将继续执行。

您可以使用$ .ajax（）返回的jqXHR对象 ，并将重新加载代码放在将在请求完成时执行的回调中。

返回jqXHR对象：

function ResetLeftList(ProductCategoryID) {
    return $.ajax

等待所有ajax完成

 var requests = new Array();

 $("#ProductCategory").children("option:selected").each(function () {

     requests.push(ResetLeftList(($(this).val())));     

 });

 $.when.apply($, requests).done(function( x ) {
     $('#leftlist').multiselect( 'reload' );
 });