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

Question

我有一个下拉列表，当选择新值时，它会触发AJAX调用。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调用，警报(结果(行返回"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);

我不确定这段代码是放错地方了，还是不适合使用。有人知道我应该在这里做什么吗？感谢

Answer 1

您可以在ajax请求的success属性中做得简单得多：

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