Django：尝试使用Java脚本填充下拉列表

Question

我有两个下拉菜单，当第一个下拉菜单更改时，我尝试使用Javascript填充第二个下拉菜单。应该从我的views.py文件的'departements'变量中包含的数据库值中填充它。

我在网络上找到了一些代码，但是当我尝试将其应用于我的案例时，它不起作用。我的Java知识几乎只有0，所以我不知道自己是否走在正确的道路上。

以下是有关我的文件的更多详细信息：

models.py

class data_immo(models.Model):
    id = models.AutoField(primary_key=True)
    insee_dep = models.IntegerField(db_column='INSEE_DEP', blank=True, null=True) 
    nom_reg = models.TextField(db_column='NOM_REG', blank=True, null=True)  

    class Meta:
        managed = True
        db_table = 'immo'

views.py

def MyView(request):

    query_results = data_immo.objects.all()
    regions = data_immo.objects.values_list("nom_reg", flat=True).distinct()
    departements = data_immo.objects.values_list("insee_dep", flat=True).distinct()

    query_results_dict = {
        'query_results': query_results,
        'regions': regions,
        'departements': departements,
    }

    return render(request,'home.html', query_results_dict)

home.html

<select id="reg" name="reg" onChange="populate2()"> 
 {% for item in regions %}
 <option val="{{ item.nom_reg }}"> {{ item.nom_reg }} </option>    
 {% endfor %}
</select>

<select id="dep" name="dep"></select>

<script type="text/javascript">
 function populate2(){      
 $('.dep').append('<option>' + departements[0].insee_dep  + '</option');
      }
</script>

我需要populate2（）函数来更新'dep'下拉列表。该函数显然是错误的，但我不知道确切在哪里。预先感谢！

Answer 1

（免责声明：自从我上次使用Django已经有一段时间了）

我注意到的一些事情是：

1. 您正在以.dep而不是#dep的形式查询元素。 .查询HTML元素的class属性，#查询其id。

2. 选项（</option>）的结束标签有错字

3. [departements仅存在于服务器端

如果我理解正确的问题，如果使用浏览器API，则可能需要以下类似内容

function populate2() {
    let depSelect = document.querySelector('#dep');
    let option;
    {% for d in departements %}
    option = document.createElement("OPTION");
    option.innerText = "{{ d.insee_dep }}";
    option.value = "{{ d.insee_dep }}";
    depSelect.appendChild(option);
    {% endfor %}
}

或在jQuery中

function populate2() {
    let depSelect = $('#dep');
    {% for d in departements %}
    $($.parseHTML('<option></option>'))
        .text("{{ d.insee_d }}")
        .val("{{ d.insee_d }}")
        .appendTo(depSelect);
    {% endfor %}
}