根据先前的选择显示/隐藏下拉菜单

Question

I would like to show an additional dropdown menu based on a user's selection. Using my case, if a user selects installments an additional dropdown menu would appear, it would then be hidden if the user changes its selection.

This is what I have tried

            <select name='installments' required class="form-control my-2" onclick="choose()">
                <option value="" disabled selected hidden>How would you like to pay?</option>
                {% for value, name in form.fields.installments.choices %}
                    <option value="{{value}}">{{name}}</option>
                {% endfor %}
            </select>
            <!-- if installments -->
            <select name='installnum' class="form-control my-2" style="display:none">
                <option value="" disabled selected hidden>How many months would you like to pay this over?</option>
                {% for value, name in form.fields.installmnum.choices %}
                    <option value="{{value}}">{{name}}</option>
                {% endfor %}
            </select>

This is the javascript I wrote

<script>
    function choose() {
        if (document.getElementById('installments').value == 'installments') {
            document.getElementById('installnum').style.display == 'block';
                } else {
                    document.getElementById('installnum').style.display = 'none';
                }
            }
</script>

The idea is supposed to be if you select installments the dropdown menu installnum would appear

This is my forms.py with the list of options for each dropdown menu

installment_choices = (
    ('upfront', 'Upfront'),
    ('installments', 'Installments'),
)
installnum_choices = (
    ('2', '2 months'),
    ('3', '3 months'),
    ('4', '4 months'),
    ('5', '5 months'),
    ('6', '6 months'),
    ('7', '7 months'),
    ('8', '8 months'),
    ('9', '9 months'),
    ('10', '10 months'),
)

Answer 1

I'm not entirely sure this answers the question, but it looks like you're trying to access the DOM element and read it's value directly. I believe you need to look at the value generated by the event.

function choose (event)
{
   event.preventDefault();
   if(event.value === "expected") { // ... then modify the css }
}