Django中使用jQuery Ajax实现HTML select下拉列表联动问题求解

核心问题 #

• 你的AJAX回调逻辑存在DOM结构嵌套错误：后端返回的是完整的<select id="sequence">标签代码，你用$("#sequence").html(data)会把新的select标签塞进原有select标签内部，这种嵌套的select不符合HTML规范，浏览器会直接忽略内部内容，因此显示为空。
• 后端load_equipment接口设计不合理：当前返回的是完整的页面模板，而非二级下拉所需的选项片段，后续维护也容易出问题。

具体解决步骤 #

步骤1：拆分选项片段模板 #

新建模板文件maintenance/equipment_options.html，仅保留二级下拉的option循环逻辑，不要外层select标签：

{% for instance in equipment %}
<option value="{{ instance.sequence }}">{{ instance.sequence }}</option>
{% endfor %}

步骤2：修改后端接口视图 #

修改load_equipment方法，渲染上述片段模板而非完整页面：

def load_equipment(request):
    if request.method == 'GET':
        line = request.GET.get('line_nm')       
        equipment = MaintenanceEquipment.objects.filter(line_nm=line)      
        context = {'equipment': equipment}
        # 改为渲染选项片段
        return render(request, 'maintenance/equipment_options.html', context) 

步骤3：（可选）优化首次加载体验 #

初始访问页面时，给context传入默认的二级下拉选项，避免首次打开时二级下拉为空：

def maintenanceIssueView(request):
    equipment_list = MaintenanceEquipment.objects.all()    
    # 取第一条产线对应的设备作为默认值
    default_equipment = []
    if equipment_list.exists():
        first_line = equipment_list.first().line_nm
        default_equipment = MaintenanceEquipment.objects.filter(line_nm=first_line)
    context = {'equipment_list':equipment_list, 'equipment': default_equipment}
    return render(request, 'maintenance/maintenanceIssue.html', context)

临时验证方案 #

如果暂时不想拆分模板，也可以直接修改AJAX的success回调，直接替换整个select元素即可生效：

success: function (data) {  
  $("#sequence").replaceWith(data); 
}

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