在 AJAX 调用后使用 django 变量填充下拉列表答案

【问题标题】：Populating a dropdown with a django variable after AJAX call在 AJAX 调用后使用 django 变量填充下拉列表
【发布时间】：2020-06-20 19:31:26
【问题描述】：

I have a dropdown that triggers an AJAX call when a new value is selected. AJAX 脚本调用我的 Django 视图，该视图返回一个变量（值列表）。它似乎一直有效，直到我需要用该列表中的值填充第二个下拉列表的步骤。我不知道该怎么做。

这是我的html代码：

<form class="wrapper" action="" method="post"> {% csrf_token %} 

  <select name="myVal" class="toChange">
    <option val="1">1</option>  
    <option val="2">2</option>   
  </select>

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


  <script type="text/javascript">
    function dropdownChange () {
      var selectedValue = $(".toChange option:selected").val();
      $.ajax({
              url: '/myApp/templates/3/',
              type: 'POST',
              data: {'myVal': selectedValue},
              success: function(result) {
                alert(result);
              }
              }); 
    }
    $(".toChange").change(dropdownChange);

  </script>

</form>

这是我的views.py文件：

@csrf_exempt
def MyView3(request):

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

        myVariable = json.dumps(["1", "2", "3", "4", "a"]) 


        return HttpResponse(myVariable , content_type='application/json')
    else:
        return render(request,'home3.html')

当我在下拉列表中选择一个新值时，它会触发 AJAX 调用，并且 alert(result) 行返回“1,2,3,4,a”。所以这部分有效，但我不知道如何用这些值填充我的“dep”下拉列表。

我一直在尝试在脚本中插入以下代码，但没有产生任何结果：

    var select = document.getElementById("dep");
    var options = result
    for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);

我不确定这段代码是否只是放错了地方，或者它只是不适合使用。有谁知道我应该在这里做什么？谢谢

【问题讨论】：

标签： javascript django ajax dropdown

【解决方案1】：

你可以在 ajax 请求的success 属性中做的更简单：

        success: function(data) {
            var str = '';
            data.forEach(function(opt){
                str += '<option value="' + opt + '">' + opt + '</option>';
            });
            document.getElementById("dep").innerHTML = str;
        }

【讨论】：

非常感谢先生，这正是我所需要的！