1

SO に関する他の「jQuery Select Menu」投稿のいずれでも問題が解決されていないため、ここで重複を回避しようとしています。正しい方向に微調整されることをただ見ているだけです。

車の結果を製造元とモデル別に検索するための一連の選択ボックスがあります。当然、最初<select>は車のメーカーです。この<select>要素は、ページの読み込み時に PHP で読み込まれます。Make が選択されると、makeID が AJAX を介して渡され、選択された Make に関連するモデルのセットが取得されます。

これはすべてうまく機能しています。私の問題は、Make リストに複数の選択を行うと、2 番目のボックスが更新されないため、2 番目の<select>ボックスに多くの異なる make のモデルが追加されること<select>です。

<select>最初のボックスの選択に関連する現在の結果のみを表示するには、2 番目のボックスを更新するにはどうすればよいですか<select>。

私のHTML：

<form method="post" action="">
  <p>
    <label for="make">Make</label>
    <select name="make" id="make">
      <?php foreach ($usedMakes->MakeResult as $MakeResult) { ?>
        <option value="<?php echo $MakeResult->makeId; ?>"><?php echo $MakeResult->makeName; ?></option>
      <?php } ?>
    </select>
  </p>
  <p>
    <label for="model">Model</label>
    <select name="model" id="model">
      <option value="" selected>Make a Selection</option>
    </select>
  </p>
  <p>
    <button name="submit" id="submit">&nbsp;Submit&nbsp;</button>
  </p>
</form>

私のJavaScript：

$("#make").change(function() {
  var makeId = $(this).val();
  $.ajax({
    url: "process.inc.php?makeId=" + makeId,
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
      for(i = 0 ; i < data.length; i++) {
        var modelId = data[i].ModelResult.modelId;
        var modelName = data[i].ModelResult.modelName;
        var response = "<option value=\"" + modelId + "\">" + modelName + "</option>";
        var appendedData = $(response).insertAfter($("#model option:first-child"));
        $("#model option:first-child").data(appendedData);
      };
    }
  });
});
4

2 に答える 2

2

オプションを削除する

$("#model option").remove();  //removes all
$("#model option:gt(0)").remove();  //leaves first item, removes the rest

for ループではなく、リスト全体を作成してからのみ更新する必要があります

  var list = "":
  for (i = 0 ; i < data.length; i++) {
    var modelId = data[i].ModelResult.modelId;
    var modelName = data[i].ModelResult.modelName;
    list += "<option value=\"" + modelId + "\">" + modelName + "</option>";
  };
  var theSelect = $("#model");
  theSelect.find("option:gt(0)").remove();
  theSelect.append(list);
于 2012-10-02T19:16:50.327 に答える
0

すべての応答で空にしてから追加するだけです

代わりにこれを試してください..

$("#model").empty()

次に、ajax リクエストに新しい値を追加します。

これにより、現在の選択のモデルのみが表示されるようになります..

于 2012-10-02T19:17:53.893 に答える