Динамически подгружаемые чекбосы в Django, JS
Всем привет! Хочу сделать динамически подгружаемые чекбосы в Django.
Выбираем марки машин, на основе этого выбора заполняется блок с моделями, относящихся к этим маркам (тянем с БД).
Выбираем модели , на основе этого выбора заполняется блок с годами выпуска этих автомобилей (у нескольких автомобилей может быть одинаковыегода производства, они отличаются двигателями. Пример
Ауди модель 100 год(2021-2022) двигатель 2.0
Ауди модель 100 год(2021-2022) двигатель 3.0 ).
Для этой модели машины для выбора год должен быть один (2021-2022)Выбираем интересующие нас года.
После выбора двигателя, сохраняем запись в БД.
На основе этих чекбосов формируется последний блок с выбором типа двигателя (у одной модели машины может быть разный обьем двигателя)
Пробую сделать с помощью ajax запросов
$('input[name="brend_check"]').on('change', function() {
var id = this.getAttribute('id');
if(id == undefined) return;
// обработка нажатия на чекбокс модели
if(this.checked) {
$.ajax({
url: '/home/ajax_get_model/',
dataType: 'json',
data: {"id": id},
success: function(model){
console.log(model);
var list = document.querySelector(".marks_check");
for (var i in model){
//создание чекбоска с марками машин
var inputcheck = document.createElement("input");
inputcheck.id = model[i].id;
inputcheck.type = "checkbox";
inputcheck.value = id;
var label1 = document.createElement('label');
var tag_p = document.createElement('p');
label1.htmlFor =model[i].id;
label1.innerHTML = model[i].name;
tag_p.appendChild(inputcheck);
tag_p.appendChild(label1);
list.appendChild(tag_p);
inputcheck.onclick = function(e) {
// обработка нажатия на марку авто
var id_model = this.getAttribute('id');
if (this.checked){
$.ajax({
url: '/home/ajax_get_year/',
dataType: 'json',
data: {"id": id_model},
success: function(yeays){
for (var i in yeays){
console.log( yeays);
//создание чекбоска с годами
var list_year = document.querySelector(".years_check");
var inputcheck_year = document.createElement("input");
var label_year = document.createElement('label');
var tag_p_year = document.createElement('p');
inputcheck_year.id = yeays[i].id;
inputcheck_year.type = "checkbox";
inputcheck_year.value = id_model;
inputcheck_year.start = yeays[i].year_start;
inputcheck_year.end = yeays[i].year_end;
label_year.htmlFor = yeays[i].id;
label_year.appendChild(document.createTextNode(yeays[i].brand + ' '+ yeays[i].model + ' ' + yeays[i].generation + '(' + yeays[i].year_start + ' - ' + yeays[i].year_end + ')'));
tag_p_year.appendChild(inputcheck_year);
tag_p_year.appendChild(label_year);
list_year.appendChild(tag_p_year);
inputcheck_year.onclick = function(e) {
// var id_engine = this.getAttribute('id');
var id_engine = id_model;
console.log(id_engine);
if (this.checked){
console.log("year");
$.ajax({
url: '/home/ajax_get_engine/',
dataType: 'json',
data: { "id": id_engine,
"year_start": engine[i].year_start,
"year_end": engine[i].year_end,
},
Из за того что на динамически добавленный чекбокс нужно вешать обработчик, у меня получается большая вложенность.
Собственно ВОПРОС, как это лучше реализовать ?
ЗАРАНЕЕ СПАСИБО!!!