Question

我正在编写一些AJAX代码，该代码采用下拉列表的选定值，并将Post请求提交给视图，该视图从数据库返回一些变量。我需要用此变量中的数据填充第二个下拉列表。一切正常，除了我无法填充下拉菜单的最后一部分。

在下面的html代码中，“ reg2”是我的第一个下拉列表，而“ dep”是应填充的下拉列表：

<select name="reg2" class="toChange">
    {% for item in regions %}
    <option val="{{ item }}" {% ifequal item reg %} selected {% endifequal %}> {{ item }} </option>    
    {% endfor %}
  </select> 

<script type="text/javascript">
  function dropdownChange () {
    var selectedRegion = $(".toChange option:selected").val();
    $.ajax({
            url: '/estimmo/templates/',
            type: 'POST',
            data: {'reg2': selectedRegion}, 
            }); 
    $("#dep").val(query_results);
}

$(".toChange").change(dropdownChange);

</script>

<select id="dep" name="dep">
  {% for item in departements %}
    <option val="{{ item }}"> {{ item }} </option>    
    {% endfor %}
</select>

AJAX脚本调用以下视图：


@csrf_exempt
def MyView(request):

    if request.method == 'POST' and request.is_ajax:

        result_r = request.POST.get('reg2')
        regions = data_immo.objects.values_list("nom_reg", flat=True).distinct().order_by('nom_reg')
        departements = data_immo.objects.values_list("insee_dep").filter(Q(nom_reg=result_r)).distinct()

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

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

看来，到这里为止，一切都很好。发布请求有效，我设法在“部门”变量中捕获了我需要的数据。

我最初以为'dep'下拉列表会自动填充，但事实并非如此。然后我以为我可能需要通过JS / AJAX脚本填充该下拉菜单。我进行了一些互联网研究，并尝试了以下在脚本末尾插入的AJAX代码：

$("#dep").val(departements);

不幸的是，这也不起作用。我觉得我快到了，我想那一定很简单，但是我找不到任何帮助。你能帮忙吗？

更新：根据@xxMrPHDxx建议，我修改了代码：

views.py：

# code added below the 'departements' variable

        name = []
        value = []

        for d in departements:
            name.append(d['insee_dep'])
            value.append(d['insee_dep'])

        data = {
        "name": name,    
        "value": value,
        }

        return JsonResponse({'data':data})

html脚本修订：

<script type="text/javascript">
  function dropdownChange () {
    var selectedRegion = $(".toChange option:selected").val();
    $.ajax({
    url: '/estimmo/templates/home.html',
    type: 'POST',
    data: {'reg2': selectedRegion}, 
    success: data=>{
        // Assuming data is in stringified JSON format
        data = JSON.parse(data);
        // Get the dep div
        const dep = $("#dep");
        const options = '';
        // Loop through all the options
        for(const row of data.rows){
            options += `<option value=${row.value}>${row.name}</tr>`;
        }
        // Set the dep innerHTML?
        dep.html(options);
    }
});

不幸的是，它仍然无法正常工作。我是否误解了我需要做什么？

Django：如何在AJAX发布请求后使用来自变量的数据填充下拉列表？

0 个答案: