django 3级联动 代码

以下是 Django 中实现三级联动的简单代码示例：

前端页面：

<select id="province">
    <option value="">请选择省份</option>
    {% for province in provinces %}
        <option value="{{ province.id }}">{{ province.name }}</option>
    {% endfor %}
</select>

<select id="city">
    <option value="">请选择城市</option>
</select>

<select id="district">
    <option value="">请选择区县</option>
</select>

<script>
    $(function() {
        $('#province').change(function () {
            var selected_province_id = $(this).val();
            if (selected_province_id !== '') {
                $.ajax({
                    type: 'GET',
                    url: '/get_cities_by_province/' + selected_province_id,
                    success: function (data) {
                        $('#city').empty();
                        $('#city').append('<option value="">请选择城市</option>');
                        $.each(data, function (index, city) {
                            $('#city').append('<option value="' + city.id + '">' + city.name + '</option>');
                        });
                        $('#district').empty();
                        $('#district').append('<option value="">请选择区县</option>');
                    }
                });
            } else {
                $('#city').empty();
                $('#city').append('<option value="">请选择城市</option>');
                $('#district').empty();
                $('#district').append('<option value="">请选择区县</option>');
            }
        });

        $('#city').change(function () {
            var selected_city_id = $(this).val();
            if (selected_city_id !== '') {
                $.ajax({
                    type: 'GET',
                    url: '/get_districts_by_city/' + selected_city_id,
                    success: function (data) {
                        $('#district').empty();
                        $('#district').append('<option value="">请选择区县</option>');
                        $.each(data, function (index, district) {
                            $('#district').append('<option value="' + district.id + '">' + district.name + '</option>');
                        });
                    }
                });
            } else {
                $('#district').empty();
                $('#district').append('<option value="">请选择区县</option>');
            }
        });
    });
</script>

views.py：

from django.http import JsonResponse
from django.shortcuts import get_object_or_404
from django.views import View

from .models import Province, City, District


class GetCitiesByProvinceView(View):
    def get(self, request, province_id):
        cities = City.objects.filter(province_id=province_id)
        data = [{'id': city.id, 'name': city.name} for city in cities]
        return JsonResponse(data, safe=False)


class GetDistrictsByCityView(View):
    def get(self, request, city_id):
        districts = District.objects.filter(city_id=city_id)
        data = [{'id': district.id, 'name': district.name} for district in districts]
        return JsonResponse(data, safe=False)

urls.py：

from django.urls import path

from .views import GetCitiesByProvinceView, GetDistrictsByCityView

urlpatterns = [
    path('get_cities_by_province/<int:province_id>/', GetCitiesByProvinceView.as_view(), name='get_cities_by_province'),
    path('get_districts_by_city/<int:city_id>/', GetDistrictsByCityView.as_view(), name='get_districts_by_city'),
]

其中，`Province`、`City`、`District` 是数据库中的模型，`GetCitiesByProvinceView` 和 `GetDistrictsByCityView` 是两个视图函数，`get_cities_by_province` 和 `get_districts_by_city` 是两个 Ajax 请求对应的 URL。在这个示例中，我们使用了 Django 内置的 `JsonResponse` 函数来返回 JSON 数据。