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!