Model Choice Field - how to add attributes to the options

[m-weintraub]

I want to add an attribute to model choice field on a form. The intent to do some javascript like hide or show based on a filter. For example, suppose there’s a two state status on each choice, like active or inactive. These are checkboxes, which onChange should make choices with appear or disappear based on whether the checkbox is checked. The attribute to add to each option is generated on each page load, as they are transient. We’re not using APIs for this app just yet.

I’ve been playing around with different solutions I’ve found on-line. They all hinge on extending widget.Select to add the custom field to the attrs. After trying several variations, I found the right search phrase that led me to a solution in the django doc: https://docs.djangoproject.com/en/4.2/ref/forms/fields/#modelmultiplechoicefield. Unfortunately, what’s in the doc isn’t what I’m seeing.

from django import forms

class ToppingSelect(forms.Select):
    def create_option(
        self, name, value, label, selected, index, subindex=None, attrs=None
    ):
        option = super().create_option(
            name, value, label, selected, index, subindex, attrs
        )
        if value:
            option["attrs"]["data-price"] = value.instance.price
        return option

class PizzaForm(forms.ModelForm):
    class Meta:
        model = Pizza
        fields = ["topping"]
        widgets = {"topping": ToppingSelect}

So I adapted the solution:

class CustomSelectWithAttrs(forms.Select):

    def create_option(
        self, name, value, label, selected, index, subindex=None, attrs=None
    ):
        
        option = super().create_option(
            name, value, label, selected, index, subindex, attrs
        )
        print(f'option = {option}')
        print(f'\tattrs = {attrs}')
        print(f'\tvalue = {value}  instance={value.instance}')
        if value:
            print(f'\tstatus = {value.instance.status}')
            option["attrs"]['current-status'] = value.instance.status.state

        print(f'all set now: option = {option}')
        return option

Here’s the form

class MatchFilterForm(ModelForm):
    class Meta:
        model = Match
        fields = {'tutor', 'student', 'match_status', 'date_started', 'comments'}
        exclude = {'lvm_affiliate', 'date_dissolved', }
        labels = {'tutor': 'Tutor pool',
                  'student': 'Student pool',
                  'match_status': "Status",
                  'date_started': "Start date",
                  'comments': 'Comments'}
        widgets = {
            'date_started': DateInput(
                format='%Y-%m-%d',
                attrs={
                    'class': 'form-control',
                    'placeholder': 'Select a date',
                    'type': 'date'
                }
            ),
            'student': CustomSelectWithAttrs,
        }

This renders to

which is great. The html is not so great - the attribute isn’t there:

I’m confused because it looks like the widget’s create_option is working:

The option initializes in the line that starts option = and attrs = {}
The custom attribute are in in attrs in the line that starts all set now.