У меня есть задача сделать динамическое выпадающее меню c, используя Jquery ajax и json в js. Все работает нормально, кроме одного. Например, когда я выбираю что-то в выпадающем меню A, выпадающий список B загружает элементы из Json через Ajax и jquery. После того, как я выбрал опцию в выпадающем меню B, выпадающий список C также заполняется из файла Json. Теперь, когда я пытаюсь переключить выпадающий вариант B и сделаю это, выпадающий список C заполняется по-другому. Однако, когда я пытаюсь выбрать все 3 раскрывающихся списка, а затем пытаюсь изменить параметр раскрывающегося списка А, раскрывающийся список B сбрасывается, а раскрывающийся список C - нет.
Мне действительно нужна помощь, я не могу найти решение. Пожалуйста, помогите мне, если кто-нибудь может.
Вот мой код, который заполняет выпадающие списки html из 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>');
}
});
});
Спасибо!