选择菜单刷新下一个选择菜单onChange答案

【问题标题】：select menu refresh next select menu onChange选择菜单刷新下一个选择菜单onChange
【发布时间】：2012-10-02 19:13:32
【问题描述】：

我试图在这里避免重复，因为在 SO 周围的任何其他“jQuery 选择菜单”帖子中都没有看到我的问题得到解决。只是希望被推向正确的方向。

我有一组选择框，用于按品牌和型号搜索汽车的结果。当然，第一个<select> 是用于制造汽车的。这个<select> 元素在页面加载时使用 PHP 填充。选择 Make 后，将通过 AJAX 传递 makeID 以检索与所选 Make 相关的模型集。

这一切都很好，我的问题是，当我对我的 Make 列表进行多项选择时，它永远不会刷新第二个 <select> 框，因此将模型附加到第二个 <select> 框的许多不同品牌中。

如何刷新第二个<select> 框以仅显示与第一个<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);
      };
    }
  });
});

【问题讨论】：

在添加更多选项之前，您必须删除 select 中的所有选项子元素。

标签： javascript jquery ajax forms onchange

【解决方案1】：

删除选项

$("#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);

【讨论】：

首先，感谢您的回复。我不断收到Uncaught TypeError: Object [object Object] has no method 'gt'。有什么建议么？简单地删除 .gt(0) 方法似乎工作得很好。它是必需的元素吗？
哎呀，它应该在选择器中。对于那个很抱歉。我更改了代码。
它会是切片，而不是我最初编写的方式。

【解决方案2】：

只需在每个响应中清空它，然后附加它

试试这个吧..

$("#model").empty()

然后在 ajax 请求中追加新值。

这将确保仅显示当前选择的模型..

【讨论】：