添加CSS类后django-smart-select联动功能失效求助

问题原因 #

你在forms.py中为ID_company和ID_subcompany手动指定了Select widget，替换了django-smart-select为关联字段自动生成的专用联动widget（如ChainedSelect）。而smart-select的联动逻辑依赖专用widget渲染的DOM属性和绑定的JS事件，替换成普通Select后，这些逻辑无法正常触发，导致联动失效。

解决方案 #

不要手动替换widget，而是在默认生成的联动widget基础上添加CSS类，具体有两种实现方式：

方式一：重写字段并保留默认widget #

在表单类中显式定义字段，获取默认的widget后添加class属性：

from django import forms
from django.forms import DateInput, NumberInput, TextInput, Textarea
from app1.models import Interventions

class Forminterventions(forms.ModelForm):
    # 显式定义字段，保留smart-select的默认widget并添加样式类
    ID_company = forms.ModelChoiceField(
        queryset=Interventions._meta.get_field('ID_company').remote_field.model.objects.all(),
        widget=forms.Select(attrs={'class': 'inputCombo'})
    )
    ID_subcompany = forms.ModelChoiceField(
        queryset=Interventions._meta.get_field('ID_subcompany').remote_field.model.objects.all(),
        widget=forms.Select(attrs={'class': 'inputCombo'})
    )

    class Meta:
        model = Interventions
        exclude = ['ID']
        fields = ['start_date', 'end_date', 'hours', 'description', 'signature', 'ID_company', 'ID_subcompany']
        widgets = {
            'start_date': DateInput(attrs={'class': 'inputDate'}),
            'end_date': DateInput(attrs={'class': 'inputDate'}),
            'hours': NumberInput(attrs={'class': 'inputNumber'}),
            'description': Textarea(attrs={'class': 'inputText'}),
            'signature': TextInput(attrs={'class': 'inputText'}),
        }

方式二：直接使用smart-select的专用widget #

导入smart-select的ChainedSelect widget，手动传入attrs和必要参数：

from django import forms
from django.forms import DateInput, NumberInput, TextInput, Textarea
from app1.models import Interventions, Subcompany
from smart_selects.widgets import ChainedSelect

class Forminterventions(forms.ModelForm):
    class Meta:
        model = Interventions
        exclude = ['ID']
        fields = ['start_date', 'end_date', 'hours', 'description', 'signature', 'ID_company', 'ID_subcompany']
        widgets = {
            'start_date': DateInput(attrs={'class': 'inputDate'}),
            'end_date': DateInput(attrs={'class': 'inputDate'}),
            'hours': NumberInput(attrs={'class': 'inputNumber'}),
            'description': Textarea(attrs={'class': 'inputText'}),
            'signature': TextInput(attrs={'class': 'inputText'}),
            'ID_company': forms.Select(attrs={'class': 'inputCombo'}),
            'ID_subcompany': ChainedSelect(
                attrs={'class': 'inputCombo'},
                chained_field='ID_company',
                chained_model_field='ID_company',
                model=Subcompany,
                show_all=False,
                auto_choose=True,
                sort=True
            )
        }

额外修正：CSS选择器错误 #

你的style.css中选择器写法有误，多个类选择器之间未加逗号，会被解析为后代选择器（仅匹配.inputDate内部的.inputNumber等元素），正确写法应为：

.inputDate, .inputNumber, .inputText, .inputCombo{
    color: black; 
    font-family: 'EB Garamond', sans-serif; 
    font-size: x-large;
    text-align: center;
    width: 100%;
}

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