Javascript Django：依赖下拉列表

我是一个新手，试图通过javascrip创建自己的依赖下拉列表，我有点被卡住了

我有两个区域，

A区域

，id为

1

，和

B区域

，id为

2

我有4个城市，

A城市

和

B城市

，它们的外键为

1

，

C城市

，

D城市

的外键为

2

。我注意到，每当它循环时，它都会离开

B CITY

和

D CITY

，它们的外键是

1

和

2

还有比使用

.remove

更好的选项，因为它会永久删除

。 有人能给我指出正确的方向吗

提前谢谢

我的html

<select id="region" name="region">
        <option id = 0 >-----</option>
        {% for item in region %}
            <option id = {{ item.id }}>{{ item.name }}</option>
        {% endfor %}
 </select>

<select id="city" name="city">
        <option id = 0>-----</option>
        {% for item in city %} 
            <option id = {{ item.reg }}>{{ item.name }}</option>
        {% endfor %}
</select>

---

下面是我解决问题的方法（如果您想使用javascript）

首先是我的html

<select id="region" name="region">
    <option id = 0 >-----</option>
    {% for item in region %}
        <option id = {{ item.id }}>{{ item.name }}</option>
    {% endfor %}
</select>

<select id="city" name="city">
    <option id = 0>-----</option>
</select>

---

感谢Shang Wang的回答

您应该用javascript构建一个散列，键是区域，值是该区域的城市列表。当您的

change

事件被触发时，您只需循环您的数据结构以提取所有城市，然后用您得到的城市替换城市下拉列表。

class REGION(models.Model):
    name = models.CharField(max_length=50)
    def __unicode__(self):
        return u'%s' % (self.name)

class CITY(models.Model):
    name = models.CharField(max_length=50)
    reg = models.ForeignKey("REGION")
    def __unicode__(self):
        return u'%s' % (self.name) 

<select id="region" name="region">
    <option id = 0 >-----</option>
    {% for item in region %}
        <option id = {{ item.id }}>{{ item.name }}</option>
    {% endfor %}
</select>

<select id="city" name="city">
    <option id = 0>-----</option>
</select>

$("#source").change(function() {
     el = $(this);
     var select = document.getElementById("city");
     $("#city").val([]);
     select.length = 0;
     $("#city").append("<option>-----</option>");

     <!--This part deletes all records in preparation for new results-->


     var reg = [{% for item in city %}"{{ item.reg }}"{% if not forloop.last %},{% endif %}{% endfor %}];
     var name = [{% for item in city %}"{{ item.name }}"{% if not forloop.last %},{% endif %}{% endfor %}];

     <!--Storing all data in an array-->

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

      }
});