### Django Admin 中实现省市区联动下拉框 要在 Django Admin 的新增界面中实现省市区的联动下拉框功能，可以通过自定义表单以及前端 JavaScript 来完成。以下是具体的实现方法： #### 后端逻辑 首先，在 `views.py` 或其他文件中编写视图函数来处理请求并返回对应的数据。 ```python from django.http import JsonResponse from .models import Province, City, District def get_cities(request): province_id = request.GET.get('province_id') cities = list(City.objects.filter(province_id=province_id).values('id', 'name')) return JsonResponse({'cities': cities}) def get_districts(request): city_id = request.GET.get('city_id') districts = list(District.objects.filter(city_id=city_id).values('id', 'name')) return JsonResponse({'districts': districts}) ``` 这些视图函数会接收来自前端的选择事件，并返回对应的子集数据[^1]。 #### URL 配置 接着配置路由以便能够访问到上面编写的两个视图函数。 ```python from django.urls import path from .views import get_cities, get_districts urlpatterns = [ path('get-cities/', get_cities, name='get_cities'), path('get-districts/', get_districts, name='get_districts'), ] ``` 此部分用于映射路径至相应的视图函数[^1]。 #### 自定义 ModelForm 和 Widget 为了使 Django Admin 支持动态加载选项的功能，可以创建一个继承于 `ModelForm` 的类，并重写其初始化过程以设置初始值和绑定 AJAX 请求。 ```python from django.forms import ModelForm, Select from django.utils.safestring import mark_safe from django.core.exceptions import ValidationError from .models import Address class CustomSelectWidget(Select): class Media: js = ('js/custom_select.js',) def render(self, *args, **kwargs): output = super().render(*args, **kwargs) widget_name = args[0].html_name if len(args) > 0 else '' return mark_safe(f'{output}<script>initCustomSelect("{widget_name}");</script>') class AddressAdminForm(ModelForm): class Meta: model = Address fields = '__all__' widgets = { 'province': CustomSelectWidget(), 'city': CustomSelectWidget(), 'district': CustomSelectWidget() } def clean(self): cleaned_data = super().clean() province = cleaned_data.get("province") city = cleaned_data.get("city") district = cleaned_data.get("district") if not (province and city and district): raise ValidationError("请选择完整的地址信息.") return cleaned_data ``` 这里通过扩展默认的 `Select` 小部件添加额外的行为支持^。 #### 前端脚本 最后一步是在静态资源目录下的 JS 文件里加入必要的交互代码。 ```javascript function initCustomSelect(name){ let selectElement = document.querySelector(`select[name="${name}"]`); if (!selectElement || !['province','city'].includes(name)) return; const urlMap={ "province": "/get-cities/", "city":"/get-districts/" }; function fetchOptions(url,paramKey,value){ fetch(`${url}?${paramKey}=${value}`) .then(response=>response.json()) .then(data=>{ let targetName=name==="province"?"city":"district"; populateDropdown(targetName,data[targetName+'s']); }); } function populateDropdown(dropdownName,optionsArray){ let dropdown=document.querySelector(`select[name="${dropdownName}"]`); while(dropdown.firstChild){ dropdown.removeChild(dropdown.firstChild); } optionsArray.forEach(optionData => { var option = new Option(optionData.name,optionData.id); dropdown.appendChild(option); }); }; selectElement.addEventListener('change',(e)=>{ let param=e.target.value; if(param.length>0){ fetchOptions(urlMap[name],name,param); }; }); } ``` 该段脚本负责监听省份与城市的变化，并向服务器发起异步调用来获取新的可选列表项[^1]^。 #### 注册模型管理器 最终记得把新构建好的 Form 应用到实际使用的场景当中去。 ```python from django.contrib import admin from .forms import AddressAdminForm from .models import Address @admin.register(Address) class AddressAdmin(admin.ModelAdmin): form = AddressAdminForm ``` 这样就完成了整个流程的设计与开发工作^。