Django and Javascript: dependent dropdown not working

Question

I am basically new in using Javascript and Django.

This is my script:

<script>
        $(document).ready(function() {
            $("#source").change(function() {
                var el = $(this);

                var reg = [];
                var name = [];

                {% for item in city %}

                    reg.push({{ item.reg }});
                    name.push({{ item.name }});

                {% endfor %}

                var a = getElementById("status").length;

                for(val i = 0; i<a; i++){
                    if(el.val() == reg[i]){
                        $("#status").append("<option id = "+ reg[i] +">" + name[i] + "</option>");
                    }

                }
            });
        });
    </script>

This is my form:

<form method = "POST">
        {% csrf_token %}
        <select id="source" name="source">
            <option>-----</option>
            {% for item in region %}
                <option id = {{ item.id }}>{{ item.name }}</option>
            {% endfor %}
        </select>

        <select id="status" name="status">
            <option>-----</option>
        </select>

        <select id="3">

            <option>-----</option>
            {% for item in zip %}
                <option id = {{ item.cit }}>{{ item.num }}</option>
            {% endfor %}

        </select>
    </form>

What I want to achieve is that the second dropdown box will display the contents under the selected item in the first dropdown box. I actually don't understand what am I doing wrong because it doesn't show any result whenever I load it, and there are no errors displayed too. What am I missing? Thanks in advance!

The django template tags are already finished rendering when the page finishes loading, so when your javascript starts to execute, there's no for loop anymore. — Shang Wang
– Shang Wang, Commented Jan 8, 2016 at 19:45
If you're new to Javascript I would personally suggest gaining a level of comfortability with the language before using any Frameworks or APIs — Andrue Anderson
– Andrue Anderson, Commented Jan 8, 2016 at 19:45

jpic · Accepted Answer · 2016-01-09 07:52:11Z

1

I suspect this part:

            {% for item in city %}

                reg.push({{ item.reg }});
                name.push({{ item.name }});

            {% endfor %}

Unless {{ item.name }} evaluates to quoted values like 'cardiff', it'll render like:

name.push(cardiff)

And that would be undefined. Maybe with some quotes:

name.push('{{ item.name }}')

Also, shouldn't the for loop be like this ?

for(val i = 0; i<reg.length; i++){

There is also a typo in {{ item.cit }}.

You should also inspect and paste the generated HTML and JS.

!!! Pro-tip: You should use the JS debugger from your browser !!!

edited Jan 9, 2016 at 7:52

answered Jan 9, 2016 at 7:41

jpic

33.5k5 gold badges114 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juan Carlos Asuncion Over a year ago

I tried that and it did not work but i found a solution. It is almost the same as your answer by doing it like this var reg = [{% for item in city %}"{{ item.reg }}"{% if not forloop.last %},{% endif %}{% endfor %}];

Collectives™ on Stack Overflow

Django and Javascript: dependent dropdown not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related