Django和Javascript:依赖下拉列表不起作用

我基本上是使用Javascript和Django的新手。

这是我的脚本：

<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>

这是我的表格：

<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>

我想要实现的是，第二个下拉框将显示第一个下拉框中所选项目下的内容。事实上，我不明白我做错了什么，因为每当我加载它时，它都不会显示任何结果，也没有显示任何错误。我错过了什么？提前感谢！