Я пытаюсь реализовать выбор цепочки из выпадающего списка. У меня есть комбинированный список HTML «Категория», и как только значение в нем изменяется, должен появиться другой комбинированный список для выбора подкатегории и т. Д., Пока не будет выбрана самая внутренняя (наиболее конкретная) категория. Таким образом, всякий раз, когда значение в выпадающем списке изменяется, я запускаю запрос AJAX GET, который должен перезагрузить только этот бит страницы, однако в настоящее время мой код просто дублирует всю страницу, а не просто создает новый <select>.
Вот мой шаблон Django с кодом jQuery:
{% extends 'pages/base.html' %}
{% block content %}
<h1>Create a product</h1>
<form method='POST' id='productForm' data-products-url="{% url 'products:ajax_load_categories' %}">
{{ form.as_p }}
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#id_category").change(function () {
var url = $("#productForm").attr("data-product-url");
var categoryId = $(this).val();
$.ajax({
url: url,
data: {
'category': categoryId
},
success: function (data) {
$("#productForm").append(data);
}
});
});
</script>
{% endblock %}
Вот мой взгляд:
def load_categories(request):
category_id = request.GET.get('category')
subcategories = Category.objects.get(id=category_id).get_children()
return render(request, 'products/category_dropdown_list_options.html', {'subcategories': subcategories})
Вот мой urls.py:
app_name = 'products'
urlpatterns = [
path('create/', product_create_view, name='product-create'),
path('ajax/load-categories/', load_categories, name='ajax_load_categories')
]
и вот небольшой кусочек HTML, который я пытаюсь создать:
products/category_dropdown_list_options.html
<select>
{% for subcategory in subcategories %}
<option value="{{ subcategory.pk }}">{{ subcategory.name }}</option>
{% endfor %}
</select>