链接选择jQuery：多个AJAX查找

我有一个问题，让一系列链接的选择输入工作。 基本上，我希望能够在第一个下拉列表中选择一个航class号，然后用有效的目的地填充第二个，第三个用有效的航class号填充。

获得一个下拉以填充下一个似乎工作正常，问题似乎是因为我需要在第一个下拉中更改以填充第三个，它似乎似乎没有可靠的工作。 有时它会起作用，有时却不起作用，我不知道为什么。

javascript代码：

$(function(){ $("select#fromICO").change(function(){ $.getJSON("/trip_reports_chain.php",{from: $('#fromICO').val(), t: 'd'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#toICO").html(options); }); $.getJSON("/trip_reports_chain.php",{to: $('#toICO').val(), t: 'f', from: $('#fromICO').val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#flightNo").html(options); }); }) $("select#toICO").change(function(){ $.getJSON("/trip_reports_chain.php",{to: $(this).val(), t: 'f', from: $('#fromICO').val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#flightNo").html(options); }) }) }) 

和HTML / PHP：

  Origin  0)) { while ($row = mysql_fetch_array($mysql_result)) { echo "".$row['originICO'].""; } } ?>   Destination   Flight Number  

trip_reports_chain.php中的代码可靠地返回正确的JSON结果，所以我也看到了一点点发布。

因此，症状是：如果我选择原点下拉，它会填充目的地而不是航class号。 如果我选择一个目的地（必须是一个具有多个可能目的地的目的地，因为选择框没有’更改’事件），那么它会填充航class号。 如果我然后返回并更改原点，它有时会更改目的地和航class号。 可能有一种模式，但我无法发现它。

Answer 1

第一次请求完成后，发送第二个请求（航class号）。 由于getJSON（）返回一个jqXHR对象，因此您可以使用其方法.done（） ，该请求会在请求成功完成后立即触发。 使用方法链接，您的代码可能如下所示：

 $(function(){ $("select#fromICO").change(function(){ $.getJSON("/trip_reports_chain.php",{from: $('#fromICO').val(), t: 'd'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#toICO").html(options); }) .done(function(){ $.getJSON("/trip_reports_chain.php",{to: $('#toICO').val(), t: 'f', from: $('#fromICO').val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#flightNo").html(options); }); }); }) $("select#toICO").change(function(){ $.getJSON("/trip_reports_chain.php",{to: $(this).val(), t: 'f', from: $('#fromICO').val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#flightNo").html(options); }) }) }) 

Answer 2

所以，AJAX是异步的。 这意味着所有三个getJSON都被触发（几乎）同时发生。

由于您的依赖关系（第二个DD取决于第一个，依此类推），您必须正确级联它们。 当getJSON完成时，将触发每个块（var选项等）。