Django结合Ajax/jQuery实现二级联动下拉框返回空问题排查求助

• 视图load_equipment错误返回了完整的HTML页面，而非二级下拉框需要的option片段：你当前将整个页面的HTML代码赋值给#equip_sequence的内容，自然无法正确渲染可选选项。
• 一级下拉框（产线选择）存在重复值：你直接遍历所有设备生成产线选项，同一条产线会重复出现多次。
• 模板渲染上下文缺失：load_equipment返回主页面时仅传递了equipment参数，主页面渲染一级下拉框需要的equipment_list不存在，会触发模板渲染报错，进一步导致返回内容异常。

1. 新增专门渲染二级下拉框选项的子模板，在maintenance模板目录下新建equipment_options.html，内容如下：

{% for instance in equipment %}
<option id="{{ instance.equip_id }}" value="{{ instance.sequence }}">{{ instance.sequence }}</option>
{% empty %}
<option value="">该产线下无可用设备</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).distinct()      
        return render(request, 'maintenance/equipment_options.html', {'equipment': equipment})

3. 优化一级下拉框渲染逻辑，避免重复选项：
   首先修改maintenanceIssueView视图，传递去重后的产线列表：

def maintenanceIssueView(request):
    # 排除空值并对产线名称去重
    line_list = MaintenanceEquipment.objects.values_list('line_nm', flat=True).distinct().exclude(line_nm__isnull=True)
    context = {'line_list': line_list}
    return render(request, 'maintenance/maintenanceIssue.html', context)

然后修改主页面一级下拉框的渲染代码：

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

4. 可选优化：给二级下拉框加初始提示，修改主页面的二级下拉框默认内容：

<select class="form-control" id="equip_sequence" name="equip_sequence">
    <option value="">请先选择产线</option>
</select>

修改完成后触发一级下拉框的change事件即可正常加载对应二级选项。

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