I am new to using a combination of Javascript and Django.
Below is the script I have written:
<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 structure:
<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>
My goal is to populate the second dropdown menu based on the selection made in the first dropdown. However, upon testing, I realized that it is not displaying any results, and there are no error messages either. Can someone help me figure out what I might be missing? Appreciate your assistance!