Django如何实现依赖型下拉选择框？技术问题咨询

错误原因 #

你代码里的filter(transport=transport)存在逻辑错误：第二个transport是表单的ModelChoiceField对象，而非用户选中的TypeTransport实例，Django会尝试把这个字段对象当作ID去查询，因此抛出TypeError。

正确实现方案 #

实现动态依赖需要后端表单逻辑处理 + 前端AJAX动态更新两部分配合：

1. 修改forms.py #

初始化body字段为空查询集，在表单初始化时根据已有数据加载对应选项：

class CreateAdvertisementForm(forms.ModelForm): 
    transport = forms.ModelChoiceField(queryset=TypeTransport.objects.all(), to_field_name="transport_name")
    # 初始设置空查询集
    body = forms.ModelChoiceField(queryset=TypeBodyTransport.objects.none(), to_field_name="body_name")

    class Meta:
        model = Advertisement
        fields = ('transport', 'body')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 处理表单提交时的transport值
        if 'transport' in self.data:
            try:
                transport_id = int(self.data.get('transport'))
                self.fields['body'].queryset = TypeBodyTransport.objects.filter(transport_id=transport_id)
            except (ValueError, TypeError):
                # 若transport值无效，保持空查询集
                pass
        elif self.instance.pk:
            # 编辑已有广告时，加载对应transport的body选项
            self.fields['body'].queryset = self.instance.transport.typebodytransport_set.all()

2. 添加后端AJAX接口 #

用于前端请求对应transport的body选项：

views.py

from django.http import JsonResponse
from .models import TypeBodyTransport

def get_body_options(request):
    transport_id = request.GET.get('transport_id')
    # 筛选对应transport的body，返回id和名称
    bodies = TypeBodyTransport.objects.filter(transport_id=transport_id).values('id', 'body_name')
    return JsonResponse(list(bodies), safe=False)

urls.py

添加接口路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('get-body-options/', views.get_body_options, name='get_body_options'),
]

3. 前端模板添加AJAX逻辑 #

监听transport字段变化，动态更新body选项：

<form method="post" id="advertisement-form">
    {% csrf_token %}
    {{ form.transport }}
    {{ form.body }}
    <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 监听transport下拉框变化
    $('#id_transport').change(function() {
        const transportId = $(this).val();
        $.ajax({
            url: '/get-body-options/',
            data: {'transport_id': transportId},
            dataType: 'json',
            success: function(data) {
                // 清空body下拉框
                $('#id_body').empty();
                // 填充新选项
                data.forEach(item => {
                    $('#id_body').append(`<option value="${item.id}">${item.body_name}</option>`);
                });
            }
        });
    });
});
</script>

说明 #

• 表单初始化逻辑确保页面刷新、编辑已有数据时，body字段能正确显示对应选项。
• AJAX逻辑实现用户选择transport后，实时更新body的下拉选项，提升交互体验。

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