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.

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);
    })
  })
})

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>

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

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.

回答1:

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);
    })
  })
})

回答2:

So, AJAX is Asynchronous. That means that all three getJSONs are fired (nearly) simultanous.

Due to your dependencies (2nd DD depends on 1st, and so on), you have to cascade them correctly. Each Block (var option, etc.) is fired, when getJSON is finished.

来源：https://stackoverflow.com/questions/15189453/chained-selects-in-jquery-multiple-ajax-lookups

标签

php

jquery

select

chained