Django工单系统产品联动问题区域下拉框无数据问题求助

你代码里共有5处核心错误，直接导致下拉框无选项，逐一修复即可：

• 错误1：AJAX参数名不匹配。前端AJAX传的参数key为product，后端视图函数loadIssueAreas取参时用了wo_machine_product，拿不到产品ID，返回空数据
• 错误2：模板文件名拼写错误。视图中引用的模板名是IssueAreaDropDown.html，实际你创建的文件名为IssueAreaDropDwon.html（DropDown拼写为DropDwon），模板加载失败
• 错误3：下拉模板变量名错误。循环变量是issue，实际渲染用了不存在的issuearea变量，option渲染为空
• 错误4：表单类字段名与反向查询规则错误。表单提交时产品字段名是wo_machine_product不是product，外键反向查询默认小写，IssueAreas_set应为issueareas_set
• 错误5：表单的AJAX请求路径错误。写死的相对路径会匹配错误，应使用Django内置url标签生成正确路径

对应修正代码 #

1. views.py #

class WO_CreateView(CreateView):
    template_name = 'WorkOrderCreate.html'
    model = WorkOrder_main
    form_class = WorkOrder_Add2

# AJAX
def loadIssueAreas(request):
    # 修正参数名，和前端AJAX传的key一致
    product_id = request.GET.get('product')
    issues = IssueAreas.objects.filter(product_id=product_id).all()
    return render(request, 'oa/IssueAreaDropDown.html', {'issues': issues})

2. IssueAreaDropDown.html（先将文件名修正为正确的DropDown拼写） #

<option value="">---------</option>
{% for issue in issues %}
<!-- 修正变量名，使用循环定义的issue变量 -->
<option value="{{ issue.pk }}">{{ issue.m_issue }}</option>
{% endfor %}

3. forms.py #

class WorkOrder_Add2(forms.ModelForm):
    class Meta:
        model=WorkOrder_main
        fields= '__all__' # 移除字段配置前后多余空格
         
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['wo_issue_area'].queryset = IssueAreas.objects.none()

        # 修正取参字段名，和模型字段名保持一致为wo_machine_product
        if 'wo_machine_product' in self.data:
            try:
                product_id = int(self.data.get('wo_machine_product'))
                self.fields['wo_issue_area'].queryset =IssueAreas.objects.filter(product_id=product_id).order_by('id')
            except (ValueError, TypeError):
                pass  
        elif self.instance.pk:
            # 修正反向查询方法名，Django默认外键反向查询为小写模型名+_set
            self.fields['wo_issue_area'].queryset = self.instance.product.issueareas_set.order_by('id')

4. WorkOrderCreate.html #

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
{% extends "Master.html" %}
{% block title %}Create{% endblock %}

{% block content %}
<h1>Create Order</h1>

<!-- 用Django url标签生成正确的请求路径，避免相对路径匹配错误 -->
<form method="post" id="IssueForm" data-issues-url="{% url 'ajax_loadIssueAreas' %}" novalidate>
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Save</button>
</form>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $("#id_wo_machine_product").change(function () {
        const url = $("#IssueForm").attr("data-issues-url");
        const productID = $(this).val(); 

        $.ajax({                     
            url: url,                    
            data: {
                'product': productID       
            },
            success: function (data) {   
              $("#id_wo_issue_area").html(data);
            }
       });
     });
</script>

{% endblock %}

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