У меня есть 3 категории и 3 поля выбора, которые называются category_id, subcategory1_id и subcategory2_id. Я использую Ajax для отправки данных на laravel и просто возвращаю соответствующие подкатегории для каждой категории. Я использую Jquery для события изменения для этого. Изменение category_id работает и просто загружает связанные подкатегории1 и подкатегории2. но когда я изменяю subcategory1, чтобы изменить только subcategory2, снова Category1 запускает. Это создает проблему. Вот мой код.
//These is an Ajax call for category_id change
$(document).on('change', $("select[name='category_id']"), function () {
console.log('category change');
var category_id = $('select[name="category_id"]').val();
$.ajax({
type: 'POST',
url: '/dynamic/ajax/category',
data: {category_id: category_id},
success: function (data) {
$('select[name="subcategory1_id"]').val("");
$('select[name="subcategory1_id"]').find('option').remove();
$.each(JSON.parse(data), function(index, value) {
$('select[name="subcategory1_id"]').append('<option value="' + value.id + '">' + value.name + '</option>');
});
}
});
});
//These is an Ajax call for subcategory1_id change
$(document).on('change', $("select[name='subcategory1_id']"), function () {
var subcategory1_id = $('select[name="subcategory1_id"]').val();
console.log('subcategory1 change');
$.ajax({
type: 'POST',
url: '/dynamic/ajax/subcategory1',
data: {subcategory1_id: subcategory1_id},
success: function (data) {
$('select[name="subcategory2_id"]').val("");
$('select[name="subcategory2_id"]').find('option').remove();
$.each(JSON.parse(data), function(index, value) {
$('select[name="subcategory2_id"]').append('<option value="' + value.id + '">' + value.name + '</option>');
});
}
});
});
Я ценю вашу помощь, ребята.