Django：更新表单中如何让关联下拉框加载过滤后的对象列表？

问题描述 #

我的Django应用包含多级关联下拉框：

• 新增记录时功能正常：选择Country后自动加载对应State列表；选择State后加载对应Suburb列表，保存后数据可正常查看。
• 更新记录时出现异常：SuburbForm初始化后State下拉框为空，本该在选择Country后触发load_dropdowns函数加载对应State，但更新表单中该操作完全无效，下拉框始终为空；若将State字段的queryset改为加载全部对象，更新表单能正常填充，但新增和更新场景都会失去下拉框过滤功能。

相关代码 #

models.py

from django.db import models

class Country(models.Model):
    item_name = models.CharField(verbose_name="Country")

class State(models.Model):
    item_name = models.CharField(verbose_name="State")
    state_in_country = models.ForeignKey(Country, on_delete=models.SET_NULL, verbose_name="Country", blank=True, null=True)

class Suburb(models.Model):
    item_name = models.CharField(verbose_name="Suburb")
    suburb_in_country = models.ForeignKey(Country, on_delete=models.SET_NULL, verbose_name="Country", blank=True, null=True)
    suburb_in_state = models.ForeignKey(State, on_delete=models.SET_NULL, verbose_name="State", blank=True, null=True)

forms.py

from django import forms
from .models import Country, State, Suburb

class CountryForm(forms.ModelForm):        
    class Meta:
        model = Country
        fields = ['item_name']

class StateForm(forms.ModelForm):
    class Meta:
        model = State
        fields = ['item_name', 'state_in_country']

class SuburbForm(forms.ModelForm):
    # 单独定义依赖下拉框字段
    suburb_in_country = forms.ModelChoiceField(
        queryset=Country.objects.filter(deleted=False),
        widget=forms.Select(attrs={"hx-get": "load_states_for_suburbform/", "hx-target": "#id_suburb_in_state"}),
        label="Country"
    )

    # 该字段在新增表单中选择Country后会加载过滤列表，但更新表单始终为空
    suburb_in_state = forms.ModelChoiceField(queryset=State.objects.none(),label="State")
        
    class Meta:
        model = Suburb
        fields = ['item_name', 'suburb_in_country', 'suburb_in_state']

    def __init__(self, *args, **kwargs):
        super(SuburbForm, self).__init__(*args, **kwargs)

        # 处理依赖下拉框的输入
        if 'suburb_in_country' in self.data:
            suburb_in_country = int(self.data.get("suburb_in_country"))
            self.fields['suburb_in_state'].queryset = State.objects.filter(state_in_country=suburb_in_country)     

views.py

from django.shortcuts import render,redirect,get_object_or_404
from .forms import *
from .models import *

def update(request, id, item):
    item = str_to_class(item)
    page_title = 'Update ' + item._meta.verbose_name
    instance = get_object_or_404(item, id=id)

    if request.method == 'POST':
        form = str_to_class(item._meta.verbose_name.strip() + 'Form')(request.POST, instance=instance)
        if form.is_valid():
            form.save()
        return redirect(item._meta.list_view)
    else:
        form = str_to_class(item._meta.verbose_name.strip() + 'Form')(instance=instance)
                     
    context = {'form':form, 
               'title': page_title,
               'list_view': item._meta.list_view}

    return render(request, 'create.html', context)

# 加载依赖父选项的下拉框数据
def load_dropdowns(request, item, parent_field):
    parent_id = 0 if request.GET.get(parent_field) in (None, '') else request.GET.get(parent_field) 
    if parent_id == 0:
        # 父选项未选择时返回空下拉框
        return render(request, "emptydropdown.html")
    
    if item == State:
        # 加载选中Country对应的State
        items = State.objects.filter(state_in_country_id=parent_id, deleted=False).order_by('item_name')
    
    if item == Suburb:
        # 加载选中State对应的Suburb
        items = Suburb.objects.filter(suburb_in_state_id=parent_id, deleted=False).order_by('item_name')
    return render(request, 'dependentdropdown.html', context={'items': items})

def load_states_for_suburbform(request):
    return load_dropdowns(request, State, 'suburb_in_country')

问题原因 #

1. 更新场景未初始化关联数据：SuburbForm的__init__方法仅处理了表单提交时的self.data，未考虑更新场景下已有实例的suburb_in_country值，导致初始化时State下拉框无数据。
2. HTMX未触发初始加载：更新表单加载时Country已有选中值，但HTMX默认只在change事件触发请求，不会自动执行一次初始加载。

修复步骤 #

1. 修改SuburbForm的__init__方法 #

添加对更新场景的处理，当表单绑定了已有实例且实例关联了Country时，自动填充对应State的queryset：

def __init__(self, *args, **kwargs):
    super(SuburbForm, self).__init__(*args, **kwargs)

    # 处理表单提交时的依赖输入
    if 'suburb_in_country' in self.data:
        suburb_in_country = int(self.data.get("suburb_in_country"))
        self.fields['suburb_in_state'].queryset = State.objects.filter(state_in_country=suburb_in_country, deleted=False).order_by('item_name')
    # 处理更新场景：绑定实例时自动加载对应State
    elif self.instance.pk and self.instance.suburb_in_country:
        self.fields['suburb_in_state'].queryset = State.objects.filter(
            state_in_country=self.instance.suburb_in_country,
            deleted=False
        ).order_by('item_name')

2. 让HTMX在页面加载时自动触发请求 #

修改suburb_in_country字段的widget，添加hx-trigger="load, change"，确保页面加载时自动请求一次State数据：

suburb_in_country = forms.ModelChoiceField(
    queryset=Country.objects.filter(deleted=False),
    widget=forms.Select(attrs={
        "hx-get": "load_states_for_suburbform/", 
        "hx-target": "#id_suburb_in_state",
        "hx-trigger": "load, change"  # 新增load触发事件
    }),
    label="Country"
)

3. 优化下拉框模板（可选） #

确保dependentdropdown.html返回的选项保留当前选中值，避免HTMX更新后选中状态丢失：

{% for item in items %}
    <option value="{{ item.pk }}" {% if item.pk == request.GET.selected_state %}selected{% endif %}>{{ item.item_name }}</option>
{% endfor %}

同时在load_states_for_suburbform中传递当前选中的State ID：

def load_states_for_suburbform(request):
    selected_state = request.GET.get('selected_state', '')
    response = load_dropdowns(request, State, 'suburb_in_country')
    response.context_data['selected_state'] = selected_state
    return response

在表单初始化时，给suburb_in_country的HTMX请求添加参数：

"hx-get": "load_states_for_suburbform/?selected_state={{ form.suburb_in_state.value|default:'' }}",

验证效果 #

• 更新表单加载时，State下拉框会自动填充当前实例关联的Country对应的所有State，并选中实例原有的State值。
• 重新选择Country时，HTMX会正常触发请求，更新State下拉框的过滤列表。
• 新增表单的过滤功能不受影响。

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