如何在Django模板中实现基于外键的级联下拉列表展示？

1. 定义关联模型（示例） #

假设你有两张关联表：分类表与产品表，产品表通过外键关联分类表，示例代码如下：

# models.py
from django.db import models

class Category(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name

class Product(models.Model):
    name = models.CharField(max_length=100)
    category = models.ForeignKey(Category, on_delete=models.CASCADE, related_name="products")

    def __str__(self):
        return self.name

2. 视图层准备数据与接口 #

视图需要传递所有分类数据到模板，同时提供接口根据分类ID获取对应产品：

# views.py
from django.shortcuts import render
from django.http import JsonResponse
from .models import Category, Product

def index(request):
    categories = Category.objects.all()
    return render(request, 'index.html', {'categories': categories})

def get_products(request):
    category_id = request.GET.get('category_id')
    products = Product.objects.filter(category_id=category_id).values('id', 'name')
    return JsonResponse(list(products), safe=False)

3. 配置URL路由 #

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('get-products/', views.get_products, name='get_products'),
]

4. 模板实现级联下拉交互 #

在模板中渲染第一个下拉框（分类），通过JavaScript监听下拉变化，异步请求更新第二个产品下拉框：

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>级联下拉示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>
        <label>分类:</label>
        <select id="category-select">
            <option value="">请选择分类</option>
            {% for category in categories %}
                <option value="{{ category.id }}">{{ category.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div>
        <label>产品:</label>
        <select id="product-select">
            <option value="">请先选择分类</option>
        </select>
    </div>

    <script>
        $(document).ready(function() {
            $('#category-select').change(function() {
                var categoryId = $(this).val();
                if (categoryId) {
                    $.ajax({
                        url: '{% url "get_products" %}',
                        data: {'category_id': categoryId},
                        dataType: 'json',
                        success: function(data) {
                            $('#product-select').empty();
                            $('#product-select').append('<option value="">请选择产品</option>');
                            $.each(data, function(index, product) {
                                $('#product-select').append('<option value="' + product.id + '">' + product.name + '</option>');
                            });
                        },
                        error: function() {
                            $('#product-select').empty();
                            $('#product-select').append('<option value="">加载产品失败</option>');
                        }
                    });
                } else {
                    $('#product-select').empty();
                    $('#product-select').append('<option value="">请先选择分类</option>');
                }
            });
        });
    </script>
</body>
</html>

5. 关键注意事项 #

• 若需页面加载时默认选中分类并加载对应产品，可在视图中传递默认分类ID，或在JS中主动触发一次change事件
• 前端AJAX也可使用原生JavaScript实现，无需依赖jQuery
• 模型中的related_name用于反向查询，本示例直接通过外键ID过滤，可根据需求调整查询方式

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