Strange behavior in select drop-down in a Django template

Question

I'm working on two linked form fields ( Class and Students ) where the user selects a class from the drop-down menu and then the students form field updates with the corresponding list of students.

I have it all working with the AJAX logic, except...except...I have run into some strange behavior when trying to apply the selected attribute to the <option> tags.

views.py

def load_students(request):
    classid = request.GET.get('classid')
    contractid = request.GET.get('contractid')

    # Lookup students for given class
    students = Student.objects.getclass(classid=classid) 

    if(contractid):

         # Generate list of students associated with this contract
        contract_party_list = []
        contract_parties = ContractParty.objects.get_contract_parties(
            contractid=contractid
        )

        for mycontractparty in contract_parties:
            contract_party_list.append(mycontractparty.partyuserid)

        # Generate new student list (with appended contract user info)
        student_list = []

        for mystudent in students:
            # Set flag to determine whether student is part of contract
            if(mystudent.studentuserid in contract_party_list):
                selectedFlag = True
            else:
                selectedFlag = False

            # Add updated student info to new student list
            student_list.append(
                {
                    'studentuserid':mystudent.studentuserid, 
                    'firstname':mystudent.firstname, 
                    'lastname':mystudent.lastname, 
                    'selectedFlag': selectedFlag
                }
            )

        students = student_list

    return render(request, 'dropdown_ajax.html', {'students': students})

dropdown_ajax.html

{% if students %}
{% for student in students %}
    <option 
        value="{{ student.studentuserid }}" 
        {% if student.selectedFlag %} selected="selected"{% endif %}
    >
        {{ student.firstname }} {{ student.lastname }}
    </option>
{% endfor %}
{% endif %}

This line is causing me problems: {% if student.selectedFlag %} selected="selected"{% endif %}

The strange behavior is that the "selected" attribute never gets applied, even though student.selectedFlag evaluates to True.

A couple things I tried:

1. I moved the line above outside of the tag to see what it would do. It displays the text "selected" for the correct entries.

2. I replaced if student.selectedFlag with if student.studentuserid == 1 and the correct student was selected in the field.

3. I passed "True" / "False and numeric values for selectedFlag instead of Boolean. I tried if student.selectedFlag == "True" . Nothing.

I'm not sure what's causing this behavior. My guess it's something to do with the Django Boolean variables not being evaluated correctly within the <option> fields.

Answer 1

I don't think this is a django issue - it's an issue with the html. The html attribute should be treated as a boolean (present/not present), not given the value "selected". The correctly rendered html should look something like this:

<option value="value" selected>...</option>

not this, which I think is what's happening in yours:

<option value="value" selected="selected">...</option>

So the corrected code would looks like this:

dropdown_ajax.html

{% if students %}
{% for student in students %}
    <option 
        value="{{ student.studentuserid }}" 
        {% if student.selectedFlag %} selected{% endif %}
    >
        {{ student.firstname }} {{ student.lastname }}
    </option>
{% endfor %}
{% endif %}

Answer 2

As usual...the solution manifests itself after taking a break :) It's official...I'm an idiot. In my testing, I was looking at two different scenarios. The one that was giving me the "weird behavior", I wasn't passing the contractid value. So it was never getting to the logic that sets the selected options. D'oh! Thanks for the tips.