一旦我在第一个下拉列表中选择了不同的选项，如何重置第三个动态下拉列表？

Question

我的任务是在 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>');
    }
  });
});

谢谢！

Answer 1

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