Django级联下拉框车型选项不显示问题求助

问题现象 #

选择汽车品牌后，车型下拉框无法加载对应品牌的车型选项。

核心错误点及修复代码 #

1. 前端JS事件绑定与参数错误（home.html） #

原代码错误监听了车型下拉框的变化，且传递参数错误，需修改为监听品牌下拉框，并传递品牌ID：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dependent Dropdown in Django</title>
</head>
<body>
<h2>Car Form</h2>

<form method="post" id="modelForm" data-models-url="{% url 'ajax_load_models' %}">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit">
</form>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    // 监听品牌下拉框的变化，而非车型
    $("#id_make").change(function () {
        const url = $("#modelForm").attr("data-models-url");
        // 获取选中的品牌ID
        const makeId = $(this).val();
        $.ajax({
            url: url,
            data: {
                // 传递品牌ID参数，命名为make_id
                'make_id': makeId
            },
            success: function (data) {
                // 更新车型下拉框的内容
                $("#id_model").html(data);
            }
        });
    });
</script>

</body>
</html>

2. 后端视图过滤条件错误（views.py） #

原代码错误使用model_id作为过滤条件，需改为根据品牌ID过滤车型：

from django.http import JsonResponse
from django.shortcuts import render, redirect, get_object_or_404

from .forms import ModelCreationForm
from .models import Make, Model, Car


def model_create_view(request):
    form = ModelCreationForm()
    if request.method == 'POST':
        form = ModelCreationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('model_add')
    return render(request, 'models/home.html', {'form': form})


def model_update_view(request, pk):
    car = get_object_or_404(Car, pk=pk)
    form = ModelCreationForm(instance=car)
    if request.method == 'POST':
        form = ModelCreationForm(request.POST, instance=car)
        if form.is_valid():
            form.save()
            return redirect('model_change', pk=pk)
    return render(request, 'models/home.html', {'form': form})


# AJAX
def load_models(request):
    # 获取前端传递的品牌ID
    make_id = request.GET.get('make_id')
    # 根据品牌ID过滤对应的车型
    models = Model.objects.filter(make_id=make_id).all()
    return render(request, 'models/model_dropdown_list_options.html', {'models': models})

3. 表单初始化逻辑错误（forms.py） #

原代码在编辑场景下的车型查询集错误，需修正为从关联的品牌获取车型：

from django import forms

from autobuddy.models import Make, Model, Car

class ModelCreationForm(forms.ModelForm):
    class Meta:
        model = Car
        fields = '__all__'

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['model'].queryset = Model.objects.none()

        if 'make' in self.data:
            try:
                make_id = int(self.data.get('make'))
                self.fields['model'].queryset = Model.objects.filter(make_id=make_id).order_by('name')
            except (ValueError, TypeError):
                pass  # 无效输入，保持空查询集
        elif self.instance.pk:
            # 编辑场景下，从当前车辆的品牌获取对应车型
            self.fields['model'].queryset = self.instance.make.model_set.order_by('name')

4. 模型导入路径修正（可选） #

检查forms.py中的模型导入路径，确保与项目结构一致：原代码导入autobuddyapp.models，若你的应用名为autobuddy，需改为autobuddy.models（已在上述代码中修正）。

验证步骤 #

1. 确保PostgreSQL中已正确存入品牌与车型的关联数据
2. 重启Django开发服务器
3. 访问表单页面，选择品牌后查看车型下拉框是否正常加载对应选项

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