Question

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

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

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 += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("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 += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("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 += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#flightNo").html(options);
    })
  })
})

HTML / PHP：

<select name="origin" id="fromICO">
    <option value="">Origin</option>
<?php
$sql = "SELECT origin FROM data_flights GROUP BY origin ORDER BY origin ASC";
$mysql_result = mysql_query($sql, $mysql_link);
if ((!mysql_error()) && (mysql_num_rows($mysql_result) > 0)) {
    while ($row = mysql_fetch_array($mysql_result)) {
        echo "<option value='".$row['originICO']."'>".$row['originICO']."</option>";
        }
}
?>  
</select>
<select name="destination" id="toICO">
  <option value="">Destination</option>
</select>
<select name="flightno" id="flightNo">
  <option value="">Flight Number</option>
</select>

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

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

Answer 1

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

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

Answer 2

第一次请求完成后，发送第二个请求（航班号）。由于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 += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("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 += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        $("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 += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#flightNo").html(options);
    })
  })
})

链接在jQuery中选择：多个AJAX查找

2 个答案: