Django Admin外键联动问题：选择STATE后仅显示对应DISTRICT

要解决Admin后台添加TALUK时，选择STATE后仅显示对应DISTRICT的问题，我们可以通过自定义Admin表单+AJAX联动实现，具体步骤如下：

1. 自定义TALUK的Admin表单 #

在admin.py中创建自定义表单，初始化时根据已有STATE过滤DISTRICT选项：

from django import forms
from django.contrib import admin
from .models import STATE, DISTRICT, TALUK, VILLAGE

class TalukForm(forms.ModelForm):
    class Meta:
        model = TALUK
        fields = '__all__'

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 编辑时：根据当前TALUK关联的STATE过滤DISTRICT
        if self.instance.pk:
            self.fields['taluk_district'].queryset = DISTRICT.objects.filter(
                district_state=self.instance.taluk_state
            )
        # 新建时：默认隐藏所有DISTRICT，等待STATE选择后加载
        else:
            self.fields['taluk_district'].queryset = DISTRICT.objects.none()

2. 配置TALUK的Admin类并引入JS #

在admin.py中注册TALUK的Admin类，同时指定媒体文件实现前端联动：

class TalukAdmin(admin.ModelAdmin):
    form = TalukForm
    
    # 关联自定义JS文件
    class Media:
        js = ('admin/js/taluk_district_filter.js',)

# 注册所有模型
admin.site.register(STATE)
admin.site.register(DISTRICT)
admin.site.register(TALUK, TalukAdmin)
admin.site.register(VILLAGE)

3. 编写前端联动JS #

在项目的static/admin/js/目录下创建taluk_district_filter.js（若目录不存在需手动创建），实现STATE选择变化时动态加载DISTRICT：

document.addEventListener('DOMContentLoaded', function() {
    const stateSelect = document.getElementById('id_taluk_state');
    const districtSelect = document.getElementById('id_taluk_district');
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    // 监听STATE选择事件
    stateSelect.addEventListener('change', function() {
        const stateId = this.value;
        // 清空DISTRICT下拉框
        districtSelect.innerHTML = '<option value="">---------</option>';
        
        if (stateId) {
            // 发送AJAX请求获取对应STATE的DISTRICT
            fetch(`/admin/api/districts/?state=${stateId}`, {
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
            .then(response => response.json())
            .then(data => {
                data.forEach(district => {
                    const option = document.createElement('option');
                    option.value = district.id;
                    option.textContent = district.name;
                    districtSelect.appendChild(option);
                });
            });
        }
    });

    // 页面加载时，若已有STATE值则自动加载对应DISTRICT
    if (stateSelect.value) {
        stateSelect.dispatchEvent(new Event('change'));
    }
});

4. 添加API接口返回DISTRICT数据 #

在views.py中编写视图函数，根据传入的STATE ID返回对应的DISTRICT列表：

from django.http import JsonResponse
from .models import DISTRICT

def get_districts_by_state(request):
    state_id = request.GET.get('state')
    if not state_id:
        return JsonResponse([], safe=False)
    
    # 查询对应STATE的DISTRICT并返回id和名称
    districts = DISTRICT.objects.filter(
        district_state=state_id
    ).values('id', 'district_name')
    
    # 转换为JS需要的格式
    districts_list = [{'id': d['id'], 'name': d['district_name']} for d in districts]
    return JsonResponse(districts_list, safe=False)

5. 配置API路由 #

在项目根目录的urls.py中添加API路由：

from django.contrib import admin
from django.urls import path
from .views import get_districts_by_state

urlpatterns = [
    path('admin/', admin.site.urls),
    # 添加DISTRICT接口路由
    path('admin/api/districts/', get_districts_by_state, name='get_districts_by_state'),
]

可选：优化模型减少冗余 #

当前TALUK模型中taluk_state字段可通过taluk_district关联到STATE，建议移除该字段避免数据冗余，修改后的TALUK模型如下：

class TALUK(models.Model):
    taluk_district=models.ForeignKey(DISTRICT,on_delete=models.CASCADE)
    taluk_name=models.CharField(max_length=25)
    
    # 通过property获取关联的STATE
    @property
    def taluk_state(self):
        return self.taluk_district.district_state
    
    def __str__(self):
        return self.taluk_name

若保留原模型，需确保taluk_state与taluk_district的关联一致性，可通过表单验证或信号机制实现。

内容的提问来源于stack exchange，提问作者Leo Sebastian