0

一連のリンクされた選択入力を機能させるのに問題があります。基本的に、最初のドロップダウンでフライト番号を選択できるようにしたいので、2番目に有効な目的地を入力し、3番目に有効なフライト番号を入力します。

1つのドロップダウンを取得して次のドロップダウンにデータを入力することは正常に機能しているようです。問題は、最初のドロップダウンを変更して3番目のドロップダウンにもデータを入力する必要があるため、確実に機能していないように見えることです。うまくいくこともあれば、うまくいかないこともありますが、その理由はわかりません。

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

したがって、AJAXは非同期です。これは、3つのgetJSONすべてが（ほぼ）同時に起動されることを意味します。

依存関係があるため（2番目のDDは1番目に依存するなど）、それらを正しくカスケードする必要があります。getJSONが終了すると、各ブロック（varオプションなど）が起動されます。

于 2013-03-03T19:23:58.353 に答える
0

最初のリクエストが完了したら、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);
    })
  })
})
于 2013-04-25T13:06:11.200 に答える