jQuery中的链接选择:多个AJAX查找 [英] Chained selects in jQuery: Multiple AJAX lookups

问题描述

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

I'm having an issue getting a series of linked select inputs to work. Basically, I want to be able to select a flight number in the first drop down, then that populates the second with valid destinations, and the third with valid flight numbers.

让一个下拉列表填充下一个似乎很好，问题似乎是因为我需要在第一个下拉列表中进行更改以同时填充第三个下拉列表，所以它似乎无法可靠地工作.有时它有用，有时却不起作用，我不确定为什么.

Getting one drop down to populate the next seems to be working fine, the problem seems to be that because I need a change in the first drop down to also populate the third, it just doesn't seem to be working reliably. Sometimes it works, sometimes it doesn't, and I'm not sure why.

javascript代码:

The javascript code:

$(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:

And the 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结果，因此我也发现了一点.

The code in trip_reports_chain.php reliably returns the right JSON results, so I see little point posting that too.

因此，症状是:如果我选择了始发地下拉列表，则会填充目的地，而不填充航班号.如果我选择一个目的地(由于选择框没有'change'事件，所以必须是一个目的地且有多个可能的目的地)，那么它将填充航班号.如果我随后返回并更改原点，它有时会更改目的地和航班号.可能有一个模式，但我找不到它.

So, the symptoms are: If I select the origin drop down, it populates the destination but not the flight number. If I select a destination (which has to be one with more than one possible destination, since there's no 'change' event of the select box), then it populates the flight numbers. If I then go back and change the origin, it sometimes changes both the destination and flight number. There may be a pattern to it, but I can't spot it.

推荐答案

在完成第一个请求后，发送第二个请求(航班号).由于getJSON()返回 jqXHR 对象，因此可以使用其方法.done()，当请求成功完成后立即触发.通过方法链接，您的代码可能如下所示:

Send your second request (for the flight no.) when the first request is done. Since getJSON() returns a jqXHR object you can use its method .done() which fires as soon as the request completes successfully. With method chaining your code may look like this:

$(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查找的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！