Django Forms：django-select2无法正确渲染多选标签选择框

问题分析 #

你的代码存在两个核心问题，导致Select2样式未正常渲染：

1. Widget未实例化：在forms.py中，你传递给字段的是Select2TagWidget类本身，而非类的实例；
2. 前端缺失Select2依赖资源：Select2需要CSS、JS文件以及jQuery支持才能渲染出预期的多选标签样式，后端配置正确但前端资源未加载时，会显示原生多选框。

解决方案 #

1. 修正Form中的Widget实例化

修改forms.py里的formField1字段，将widget=Select2TagWidget改为widget=Select2TagWidget()（添加括号完成类的实例化）：

class BankForm(ModelForm):
    required_css_class = "required"
    formField1 = forms.ModelMultipleChoiceField(
        queryset=Bank.objects.all(),
        label="Lead Bank",
        widget=Select2TagWidget(),  # 添加括号实例化Widget
    )

    class Meta:
        model = AdditionalBank
        fields = ["formField1"]
        labels = {}

2. 在模板中引入Select2前端资源

首先确认settings.py中已配置STATIC_URL，且生产环境下已执行python manage.py collectstatic收集静态文件。在渲染BankForm的模板中添加以下代码：

{% load static %}

<!-- 引入jQuery（Select2依赖，需将jQuery文件放入项目静态资源目录，如static/js/） -->
<script src="{% static 'js/jquery.min.js' %}"></script>

<!-- 引入Select2自带的CSS -->
<link href="{% static 'select2/css/select2.min.css' %}" rel="stylesheet">

<!-- 引入Select2自带的JS -->
<script src="{% static 'select2/js/select2.min.js' %}"></script>

<!-- 引入django-select2的自动初始化脚本 -->
<script src="{% static 'django_select2/django_select2.js' %}"></script>

如果项目中没有本地jQuery，需要下载jQuery的min版本到项目的static/js/目录后再引入。

3. 验证基础配置

• 确认settings.py的INSTALLED_APPS中已添加'django_select2'；
• 检查Redis配置是否正常（用于Select2的AJAX查询场景，本地数据场景不影响样式，但正确配置能保证后续功能稳定）。

完成以上修改后，页面加载时会自动将带有django-select2类的<select>元素渲染为Select2的多选标签样式。

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