Django Model Form中Select组件自定义attrs属性不生效如何解决？

你可以按优先级依次尝试以下方案：

方案1：将Select控件配置迁移到Meta widgets字段 #

Django ModelForm的字段层定义偶尔会被默认模型字段逻辑覆盖，把控件配置放到Meta的widgets字典中优先级更高：

class EvaluationForm(forms.ModelForm):
    """Form definition for Evaluation."""

    evaluation_date = forms.CharField(
        max_length=100,
        widget=forms.TextInput(attrs={"class": "form-control test"}),
    )

    class Meta:
        """Meta definition for Evaluationform."""
        model = Evaluation
        fields = [
            "summative",
            "evaluation_type",
            "evaluation_level",
            "evaluation_date",
        ]
        widgets = {
            "summative": forms.HiddenInput(),
            "evaluation_type": forms.HiddenInput(),
            # 把Select的配置移到这里
            "evaluation_level": forms.Select(
                attrs={"class": "form-control something something-else"}
            )
        }

方案2：在__init__方法中强制赋值属性 #

这是最稳妥的方案，不会被任何默认逻辑覆盖：

class EvaluationForm(forms.ModelForm):
    """Form definition for Evaluation."""

    evaluation_date = forms.CharField(
        max_length=100,
        widget=forms.TextInput(attrs={"class": "form-control test"}),
    )

    class Meta:
        """Meta definition for Evaluationform."""
        model = Evaluation
        fields = [
            "summative",
            "evaluation_type",
            "evaluation_level",
            "evaluation_date",
        ]
        widgets = {
            "summative": forms.HiddenInput(),
            "evaluation_type": forms.HiddenInput(),
        }
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 强制给evaluation_level的控件添加类
        self.fields['evaluation_level'].widget.attrs.update({
            'class': 'form-control something something-else'
        })

方案3：模板层面兜底配置 #

如果表单层面的修改不生效，可以直接在模板渲染时添加类：

方法3.1 使用django-widget-tweaks（推荐，无需手写表单） #

先安装库：pip install django-widget-tweaks，然后在INSTALLED_APPS中添加widget_tweaks，模板开头加载标签：

{% load widget_tweaks %}

渲染字段时手动加类：

{% render_field field class="form-control something something-else" %}

替换掉原来的{{ field }}即可。

方法3.2 手动渲染Select控件 #

不想用第三方库的话可以直接手写下拉框代码：

<select name="{{ field.name }}" id="{{ field.id_for_label }}" class="form-control something something-else">
    {% for value, text in field.field.choices %}
    <option value="{{ value }}" {% if field.value == value %}selected{% endif %}>{{ text }}</option>
    {% endfor %}
</select>

前端问题排查 #

如果以上方案都无效，大概率是前端逻辑导致：

• 右键检查页面元素，看原生的select标签是否被隐藏，是否有其他JS组件（比如Select2、Bootstrap-Select）替换了原生下拉框
• 如果使用了下拉框增强组件，需要在组件初始化的代码中配置类名，而非直接给原生select加类

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