在第一个下拉菜单中选择不同选项后，如何重置第三个动态下拉菜单？答案

【问题标题】：How do I make my 3rd dynamic drop down reset once I pick a different option in the 1st drop down?在第一个下拉菜单中选择不同选项后，如何重置第三个动态下拉菜单？
【发布时间】：2020-02-17 00:43:32
【问题描述】：

我的任务是在 js 中使用 Jquery ajax 和 json 制作动态下拉列表。一切正常，除了一件事。例如，当我在下拉列表 A 中选择某些内容时，下拉列表 B 通过 Ajax 和 jquery 从 Json 加载项目。在下拉 B 中选择一个选项后，下拉 C 也从 Json 文件中填充。现在，一旦我尝试切换下拉 B 选项并执行此操作，下拉 C 的填充方式会有所不同。但是，当我尝试选择所有 3 个下拉菜单，然后尝试更改下拉 A 选项时，下拉 B 会重置，但下拉 C 不会。

我真的需要帮助，我似乎找不到解决方案。如果有人可以，请帮助我。

这是我从 JSON 填充 html 下拉列表的代码。

    window.onload = (function() {
  load_json_data("vehicle");

  function load_json_data(id, parent_id) {
    var html_code = "";
    $.getJSON("/js/model/vehicles.json", function(data) {
      html_code += '<option value="">Select the type of the ' + id + "!</option>";
      $.each(data, function(key, value) {
        if (id == "vehicle") {
          if (value.parent_id == "0") {
            html_code +=
              '<option value="' + value.id + '">' + value.name + "</option>";
          }
        } else {
          if (value.parent_id == parent_id) {
            html_code +=
              '<option value="' + value.id + '">' + value.name + "</option>";
          }
        }
      });
      $("#" + id).html(html_code);
    });
  }

  $(document).on("change", "#vehicle", function() {
    var vehicle_id = $(this).val();
    if (vehicle_id != "") {
      load_json_data("brand", vehicle_id);
    } else {
      $("#brand").html('<option value="">Select a vehicle brand!</option>');
      $("#model").html('<option value="">Select a vehicle model!</option>');
    }
  });
  $(document).on("change", "#brand", function() {
    var brand_id = $(this).val();
    if (brand_id != "") {
      load_json_data("model", brand_id);
    } else {
      $("#model").html('<option value="">Select a vehicle model!</option>');
    }
  });
});

谢谢！

【问题讨论】：

标签： javascript jquery html json ajax

【解决方案1】：

为每个下拉菜单创建重置函数，您要为其清除数据并根据父下拉菜单调用该函数。在您的情况下，为下拉 B 和 C 创建函数，并在下拉 A 的更改事件上调用 B 和 C 的其余函数，类似地在 B 的更改事件上调用 C 的重置函数。

【讨论】：