You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Django车辆厂商-车型级联下拉无数据及重复请求问题排查

Django 车型厂商依赖下拉列表问题

我是Django新手,正在尝试实现汽车车型和厂商的依赖下拉列表,当前表单可以正常显示,但选择厂商后没有对应车型展示,尝试了多种方法都没有解决,希望得到相关建议。

相关代码

forms.py

from blog.models import Post, Manufactures, Models

class PostForm(ModelForm):
    class Meta:
        model = Post
        fields = 'title', 'manufacture', 'model', 'content', 'image', 'aspiration'

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

models.py

class Manufactures(models.Model):
    manufacture_id = models.AutoField(primary_key=True)
    manufacture = models.CharField(max_length=55)
        
    def __str__(self):
        return self.manufacture

    def get_absolute_url(self):
        return reverse('db-manufactures', kwargs={'pk': self.pk})


class Models(models.Model):
    model_id = models.AutoField(primary_key=True)
    model = models.CharField(max_length=55)
    model_manufacture = models.ForeignKey(Manufactures, on_delete=models.CASCADE)
    
    def __str__(self):
        return self.model

    def get_absolute_url(self):
        return reverse('blog-models', kwargs={'pk': self.pk})

views.py

def loadModels(request):
    manufacture_id = request.GET.get('model_manufacture')
    models = Models.objects.filter(manufacture_id = manufacture_id)
    return render(request, 'model_dropdown_list.html', {'models': models})

class PostCreateView(LoginRequiredMixin, CreateView):
    model = Post
    form_class = PostForm

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)
    
    def save(self, *args, **kwargs):
        super(Post,self).save(*args, **kwargs)

model_dropdown_list.html

<option value="">---------</option>
{% for model in models %}
<option value="{{ model.pk }}">{{ model.name }}</option>
{% endfor %}

post_form.html

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
    <form method="post" id="modelForm" data-models-url="{% url 'ajax' %}" novalidate>
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">发布帖子</legend>
            {{ form|crispy }}
        </fieldset>
        <div class="form-group">
            <button class="btn btn-outline-info" type="submit">发布</button>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $("#id_manufacture").change(function () {
        var url = $("#PostForm").attr("data-models-url");  // 获取加载车型的接口地址
        var manufactureId = $(this).val();  // 获取选中的厂商ID

        $.ajax({                       // 发起AJAX请求
            url: url,                   
            data: {
                'manufacture': manufactureID       // 将厂商ID作为GET参数传递
            },
            success: function (data) {   
                $("#id_model").html(data);  // 用返回数据替换车型下拉框的选项
            }
        });

    });
</script>
{% endblock content %}

urls.py

urlpatterns = [
    path('post/new/', PostCreateView.as_view(), name='post-create'),
    path('ajax/load-models', views.loadModels, name='ajax')
]

问题更新

最初排查到的错误是post_form.html的JS代码中变量名大小写不匹配:

$("#id_manufacture").change(function () {
    var url = $("#PostForm").attr("data-models-url");  
    var manufactureId = $(this).val(); // 此处变量名中d为小写

    $.ajax({                      
        url: url,                    
        data: {
            'manufacture_id': manufactureID // 此处误用了大写D的变量名      
        },
        success: function (data) {   
            $("#id_model").html(data);  
        }
    });
});

修复大小写问题后出现新的异常:

  • 首次选择厂商时请求触发1次,切换其他厂商时请求触发2次,后续切换请求次数会持续累加
  • 接口请求传递的厂商ID正确,但车型下拉框始终为空
    异常截图:
    请求参数截图
    返回结果截图

最终解决方案

修正视图层的外键筛选逻辑,以及模板文件路径:

def loadModels(request):
    model_manufacture_id = request.GET.get('model_manufacture')
    models = Models.objects.filter(model_manufacture_id=model_manufacture_id)
    return render(request, 'blog/model_dropdown_list.html', {'models': models})

内容的提问来源于stack exchange,提问作者Wazy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.19 03:54:04