Django如何根据前一项选择动态生成关联下拉选项列表

Django 模型层的choices属性是静态加载的，无法直接通过if判断实现动态变更，需要结合模型层、表单层、前端逻辑三层配合实现，具体步骤如下：

1 模型层优化 #

首先调整模型定义，不需要给state字段设置固定choices，同时将国家与对应州/省的映射关系统一维护，方便后续调用：

from django.db import models
from django.utils.translation import gettext_lazy as _

class Property(models.Model):
    address = models.CharField(max_length=200)
    city = models.CharField(max_length=200)

    COUNTRY_LIST = [
        ("USA", _("United States")),
        ("CAN", _("Canada"))
    ]
    # 统一维护国家-州/省映射关系
    COUNTRY_STATE_MAP = {
        "USA": [
            ("AL", _("Alabama")),
            ("AK", _("Alaska")),
            ("AZ", _("Arizona"))
        ],
        "CAN": [
            ("AB", _("Alberta")), # 注意原代码里加拿大阿尔伯塔缩写是AB，和美国阿拉巴马AL冲突，建议修正避免歧义
            ("BC", _("British Columbia"))
        ]
    }

    country = models.CharField(max_length=3, choices=COUNTRY_LIST)
    # state字段不设置固定choices
    state = models.CharField(max_length=2)

注意：原代码中美国阿拉巴马和加拿大阿尔伯塔的缩写都用了AL会导致数据冲突，建议修正为不同缩写避免后续问题

2 表单层逻辑实现 #

使用ModelForm自定义表单逻辑，在初始化阶段根据已选的国家值动态赋值state的可选列表，同时增加提交校验规则：

from django import forms
from .models import Property

class PropertyForm(forms.ModelForm):
    class Meta:
        model = Property
        fields = ["address", "city", "country", "state"]

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 获取已选中的国家值：优先取提交的表单数据，其次取已保存的实例数据
        selected_country = self.data.get("country") or (self.instance.country if self.instance.pk else None)
        
        # 动态设置state的可选列表
        if selected_country and selected_country in Property.COUNTRY_STATE_MAP:
            self.fields["state"].choices = Property.COUNTRY_STATE_MAP[selected_country]
        else:
            # 未选中国家时默认置空，或设置第一个国家的州列表
            self.fields["state"].choices = []

    # 增加数据校验，避免非法提交
    def clean(self):
        cleaned_data = super().clean()
        country = cleaned_data.get("country")
        state = cleaned_data.get("state")
        if country and state:
            valid_states = [s[0] for s in Property.COUNTRY_STATE_MAP.get(country, [])]
            if state not in valid_states:
                raise forms.ValidationError(_("选择的州/省不属于当前选中国家"))
        return cleaned_data

3 前端联动交互实现 #

前端需要监听国家下拉框的变更事件，动态更新州/省的下拉选项，推荐两种实现方案：

• 预加载数据方案（适合国家/省数据量小的场景）：无需额外接口请求，直接将国家州映射数据渲染到前端模板，本地完成选项切换
  模板代码示例：

  <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">提交</button>
  </form>
  
  <script>
  // 预加载所有国家的州列表
  const countryStateMap = JSON.parse('{{ Property.COUNTRY_STATE_MAP|safe }}')
  const countrySelect = document.querySelector('#id_country')
  const stateSelect = document.querySelector('#id_state')
  
  // 监听国家选择变更
  countrySelect.addEventListener('change', function() {
    const selectedCountry = this.value
    // 清空原有选项
    stateSelect.innerHTML = ''
    // 加载对应国家的州选项
    if (countryStateMap[selectedCountry]) {
      countryStateMap[selectedCountry].forEach(([value, label]) => {
        const option = document.createElement('option')
        option.value = value
        option.textContent = label
        stateSelect.appendChild(option)
      })
    }
  })
  
  // 页面加载完成后初始化一次州选项
  window.addEventListener('load', () => {
    countrySelect.dispatchEvent(new Event('change'))
  })
  </script>
  

• AJAX请求方案（适合国家/省数据量大的场景）：额外编写一个后端接口，接收国家参数返回对应州列表，前端选择国家后发起请求更新选项即可，适合后续需要扩展更多国家、省数据的场景。

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