Связанные выпадающие списки Django?

Связанные выпадающие списки в Django представляют собой функциональность, позволяющую динамически обновлять значения в выпадающем списке на основе выбора пользователя в другом выпадающем списке.

Обычно, связанные выпадающие списки используются в формах Django, чтобы предоставить более гибкую и удобную функциональность выбора значений.

Для реализации связанных выпадающих списков в Django, необходимо выполнить следующие шаги:

1. Создайте модели Django, которые представляют связанные данные. Например, если у вас есть модель Country и модель City, вы можете определить модели следующим образом:

class Country(models.Model):
    name = models.CharField(max_length=100)

class City(models.Model):
    name = models.CharField(max_length=100)
    country = models.ForeignKey(Country, on_delete=models.CASCADE)

2. Определите форму Django, которая будет использоваться для отображения связанных выпадающих списков. В этой форме вы должны использовать модели, созданные в шаге 1, в качестве полей формы. Например:

from django import forms
from .models import Country, City

class MyForm(forms.Form):
    country = forms.ModelChoiceField(queryset=Country.objects.all())
    city = forms.ModelChoiceField(queryset=City.objects.none())

3. Создайте представление Django, которое будет отображать форму и обрабатывать AJAX-запросы для обновления связанных выпадающих списков. Ниже приведен пример представления, который использует модель City для обновления значений в поле city на основе выбранной страны:

from django.http import JsonResponse

def load_cities(request):
    country_id = request.GET.get('country_id')
    cities = City.objects.filter(country_id=country_id)
    city_choices = [(city.id, city.name) for city in cities]
    return JsonResponse({'cities': city_choices})

4. Создайте JavaScript-файл, который обрабатывает изменение значения в поле country и отправляет AJAX-запрос для обновления значения в поле city. В этом JavaScript-файле вы должны присвоить функцию обработчика события change полю country и использовать $.ajax() для отправки AJAX-запроса на представление, определенное в шаге 3. Например:

$(document).ready(function() {
    $('#id_country').change(function() {
        var country_id = $(this).val();
        $.ajax({
            url: '/load_cities/',
            data: {
                'country_id': country_id
            },
            dataType: 'json',
            success: function(data) {
                var options = '';
                data.cities.forEach(function(city) {
                    options += '<option value="' + city[0] + '">' + city[1] + '</option>';
                });

                $('#id_city').html(options);
            }
        });
    });
});

5. Наконец, добавьте URL-шаблон в файл urls.py вашего Django-приложения для отображения представления, созданного в шаге 3. Например:

from django.urls import path
from .views import load_cities

urlpatterns = [
    path('load_cities/', load_cities, name='load_cities'),
    # other URLs
]

Вот и все! Теперь, когда пользователь выбирает значение в поле country, список значений в поле city будет автоматически обновляться на основе выбора пользователя. Это позволит пользователям выбрать город, основываясь на выбранной стране, что делает форму более удобной и экономит время пользователей.