DJANGO开发：自定义管理员模板文件，实现省市三级链接 示例

通过自定义管理员模板文件，实现省市三级链接。请求创建记录时，按照省>市>区的顺序选择。相应的数据按顺序显示。
更改记录时，默认显示现有数据。

Model

class Member(models.Model):
    name = models.CharField(max_length=100, verbose_name='姓名')
    province = models.CharField(max_length=100, null=True, blank=True, verbose_name='省份')
    city = models.CharField(max_length=100, null=True, blank=True, verbose_name='城市')
    district = models.CharField(max_length=100, null=True, blank=True, verbose_name='区/县')

    class Meta:
        verbose_name_plural = verbose_name = '人员'

    def __str__(self):
        return self.name

Show and url

# views
LOCATION = {'吉林省': {'长春市': ['南关区', '朝阳区', '二道区', '绿园区']}}

def choose_province(request):
    province = list(LOCATION.keys())
    return JsonResponse(province, safe=False)

def choose_city(request):
    province = request.GET.get('p')
    cities = list(LOCATION[province].keys())
    return JsonResponse(cities, safe=False)

def choose_district(request):
    province = request.GET.get('p')
    city = request.GET.get('c')
    districts = LOCATION[province][city]
    return JsonResponse(districts, safe=False)
   
# urls
from person.views import choose_province, choose_city, choose_district

urlpatterns = [
    path('province/', choose_province),
    path('city/', choose_city),
    path('district/', choose_district),
    path('admin/', admin.site.urls),
]

Admin

class="language-python">class MemberForm(forms.ModelForm):
    class Meta:
        widgets = {
            'province': forms.Select(),
            'city': forms.Select(),
            'district': forms.Select()
        }

@admin.register(Member)
class MemberAdmin(admin.ModelAdmin):
    form = MemberForm
    fields = ('name', ('province', 'city', 'district'))
    list_display = ('name', 'province', 'city', 'district')
    change_form_template = 'area.html'

这里要写一个表格来合并三个省市。这些字段显示为单选按钮框。

模板文件

在django源代码中找到文件change_form.html（django/contrib/admin/templates/admin/），将其复制到应用程序下的templates目录中。
在 admin 中指定自定义模板文件 change_form_template = 'area.html'

script">{% block admin_change_form_document_ready %}
    <script type="text/javascript"
            
            
            {% if adminform and add %}
                data-model-name="{{ opts.model_name }}"
            {% endif %}>
    </script>

    <script type="text/javascript">
        (function($) {
            $('#id_city').change(function() {
                let p_id = $('#id_province').val();
                let c_id = $('#id_city').val();
                $.get('/district/', {"p": p_id, "c": c_id }, function(a_info) {
                    var area_info = $('#id_district').empty().append('<option value>' + '---------' + '</option>');
                    $.each(a_info, function(i, area) {
                        area_info.append('<option value="' + area + '">' + area + '</option>')
                    });
                    {% if change %}
                        $("#id_district").find("option:contains({{ original.district }})").attr('selected', true);
                    {% endif %}
                });
            });

            $('#id_province').change(function() {
                let p_id = $('#id_province').val();
                $.get('/city/', { 'p': p_id }, function(c_info) {
                    var city_info = $('#id_city').empty().append('<option value>' + '---------' + '</option>');
                    $.each(c_info, function(i, city) {
                        city_info.append('<option value="' + city + '">' + city + '</option>')
                    });
                    {% if change %}
                        $("#id_city").find("option:contains({{ original.city }})").attr('selected', true);
                        $("#id_city").trigger("change");
                    {% endif %}
                });
            });

            $.get('/province/', function(p_info) {
                var province_info = $('#id_province').empty().append('<option value>' + '---------' + '</option>');
                $.each(p_info, function(i, province) {
                    province_info.append('<option value="' + province + '">' + province + '</option>')
                });
                {% if change %}
                    $("#id_province").find("option:contains({{ original.province }})").attr('selected', true);
                    $("#id_province").trigger("change");
                {% endif %}
            });
        })(django.jQuery);
    </script>