Django使用Select2实现国家城市联动时下拉无选项如何解决

问题排查&修复方案 #

1. 代码编写错误 #

• forms.py中国家字段的查询集引用错误：你写了Comunidad.objects.all()，但实际定义的国家模型叫Country，没有Comunidad这个模型类，直接替换为Country.objects.all()即可
• forms.py中城市字段的缩进错误：当前城市字段和AddressForm类同级，不属于表单字段，需要缩进放到类内部
• 联动字段配置写反：dependent_fields是用来声明当前字段依赖的上层字段，你需要的是城市依赖国家，所以该配置应该放到城市的widget属性里，键为表单内的依赖字段名country，值为城市模型关联国家的外键字段名country，国家字段不需要配置该项

2. Django-Select2必要配置缺失 #

• 模板未引入Django-Select2的静态资源，这是下拉框无选项的核心原因
• 项目路由未配置Django-Select2的异步数据接口路由，导致选项数据无法加载

具体修复代码 #

修复后的forms.py

from django import forms
from .models import Country, City
from django_select2.forms import ModelSelect2Widget


class AddressForm(forms.Form):
    country = forms.ModelChoiceField(
        queryset=Country.objects.all(),
        label="国家",
        widget=ModelSelect2Widget(
            search_fields=['name__icontains'],
        )
    )

    city = forms.ModelChoiceField(
        queryset=City.objects.all(),
        label="城市",
        widget=ModelSelect2Widget(
            search_fields=['name__icontains'],
            max_results=500,
            # 配置城市字段依赖国家字段，外键关联字段为country
            dependent_fields={'country': 'country'},
        )
    )

项目urls.py新增配置

urlpatterns = [
    # 保留你原有其他路由
    path("select2/", include("django_select2.urls")),
]

模板修改

需要在渲染表单的页面引入必要静态资源，示例如下：

<!-- 引入jQuery，Select2依赖jQuery运行 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Django-Select2的专属静态资源 -->
{{ form.media }}

<form method="post">
    {% csrf_token %}
    <table>
        {{ form.as_table }}
    </table>
    <button type="submit">提交</button>
</form>

验证步骤 #

1. 重启Django服务
2. 清理浏览器缓存后重新访问表单页面
3. 选中对应国家后，城市下拉框会自动过滤出归属该国家的所有城市选项

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