Django中从JsonResponse提取字段传给jQuery Ajax填充二级下拉菜单

问题原因 #

• 接口返回的JSON本身就是设备数组，没有嵌套在instances字段中，无需读取response.instances
• 你使用的for...in遍历数组时，得到的循环变量是数组索引（也就是你看到的0、1、2），而非数组中的设备对象
• 目标sequence字段存储在每个设备对象的fields属性下，需要逐层取值

修复方案 #

替换你AJAX请求中的success回调逻辑即可，修改后的代码如下：

success: function (response) {
  const secondSelect = $('#sequence');
  secondSelect.empty();
  // 遍历返回的设备数组
  for (const equip of response) {
    const sequence = equip.fields.sequence;
    secondSelect.append($('<option>', {
      value: sequence,
      text: sequence
    }));
  }
}

如果需要兼容低版本浏览器，也可以用普通for循环实现：

success: function (response) {
  const secondSelect = $('#sequence');
  secondSelect.empty();
  for (let i = 0; i < response.length; i++) {
    const sequence = response[i].fields.sequence;
    secondSelect.append($('<option>', {
      value: sequence,
      text: sequence
    }));
  }
}

可选优化建议 #

你当前第一个下拉框的选项是遍历所有设备生成的，同一条生产线会出现重复的line_nm选项，建议在视图中查询时做去重处理：
修改maintenanceIssueView中的查询逻辑：

def maintenanceIssueView(request):
    # 去重获取所有生产线名称
    line_list = MaintenanceEquipment.objects.values_list('line_nm', flat=True).distinct()    
    context = {'line_list': line_list}
    return render(request, 'maintenance/maintenanceIssue.html', context)

对应修改模板中第一个下拉框的遍历逻辑：

<select class="form-control" id="line_nm" name="line_nm" >
    {% for line_nm in line_list %}
    <option value="{{ line_nm }}">{{ line_nm }}</option>
    {% endfor %}
</select>

内容的提问来源于stack exchange，提问作者HudsonBarroso