0

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

让一个下拉来填充下一个似乎工作正常，问题似乎是因为我需要在第一个下拉中进行更改以填充第三个，它似乎并不能可靠地工作。有时有效，有时无效，我不知道为什么。

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 结果，所以我也觉得发布它没什么意义。

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

4

2 回答 2

0

第一个请求完成后，发送您的第二个请求（航班号）。由于 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);
    })
  })
})
于 2013-04-25T13:06:11.200 回答
0

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

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

于 2013-03-03T19:23:58.353 回答