当另一个下拉列表的选择发生变化时，如何在一个浏览列表中重新加载 jQuery 多选

Question

我已经尝试了这个论坛中提出的一些解决方案，但它们不起作用，所以我认为我在某处遗漏了一些东西。

我在两个下拉列表(产品类别和产品(上使用Patrick Springstubbe jQuery多选。

我希望产品列表根据在产品类别多选中选择的内容而更改。

我为此使用的代码如下：-

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