Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72388

How do I make my 3rd dynamic drop down reset once I pick a different option in the 1st drop down?

$
0
0

I have this task to make a dynamic dropdown using Jquery ajax and json in js. Everything works ok, except one thing. To put for example, when I pick something in dropdown A, dropdown B loads items from Json via Ajax and jquery. After I pick an option in dropdown B, dropdown C is populated also from Json file. Now, once I try and switch dropdown B option and do it, dropdown C is populated differently. However, when I try have all 3 dropdowns chosen, and then try to change dropdown A option, dropdown B resets but dropdown C does not.

I really need help i cannot seem to find a solution. Please help me out if anyone can.

Here is my code which populates the html dropdowns from the JSON.

    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>');
    }
  });
});

Thank you!


Viewing all articles
Browse latest Browse all 72388

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>