Django模型表单中根据列表框选择自动填充文本字段

没问题，这个需求在Django开发里挺常见的，我给你两种可行的实现方案，你可以根据产品数据量的大小来选择：

方案一：预加载数据到前端（适合产品数量不多的场景） #

这种方式不用额外的AJAX请求，直接把所有产品的default_qty数据提前传到模板里，前端用JavaScript监听选择变化即可填充。

1. 先确认你的模型结构（参考示例） #

# models.py
from django.db import models

class Product(models.Model):
    product_id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=100)
    default_qty = models.IntegerField()
    default_price = models.DecimalField(max_digits=10, decimal_places=2)

class ProductComponent(models.Model):
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    qty = models.IntegerField()  # 要填充默认值的字段
    # 其他组件相关字段...

2. 编写ModelForm #

# forms.py
from django import forms
from .models import ProductComponent

class ProductComponentForm(forms.ModelForm):
    class Meta:
        model = ProductComponent
        fields = ['product', 'qty']  # 加上你的其他字段

3. 视图中传递产品数据 #

# views.py
from django.shortcuts import render
from .forms import ProductComponentForm
from .models import Product

def create_component(request):
    # 把所有产品的id和default_qty做成字典
    product_qty_map = {p.product_id: p.default_qty for p in Product.objects.all()}
    form = ProductComponentForm()
    return render(request, 'create_component.html', {
        'form': form,
        'product_qty_map': product_qty_map
    })

4. 模板中添加JavaScript逻辑 #

<!-- create_component.html -->
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">保存组件</button>
</form>

<script>
// 把后端传的字典转成JS对象
const productDefaultQty = {{ product_qty_map|safe }};

// 获取表单元素（Django自动生成的id是id_字段名）
const productSelect = document.getElementById('id_product');
const qtyInput = document.getElementById('id_qty');

// 监听产品选择变化
productSelect.addEventListener('change', function() {
    const selectedId = this.value;
    if (selectedId) {
        qtyInput.value = productDefaultQty[selectedId];
    } else {
        qtyInput.value = '';
    }
});

// 页面加载时，如果有默认选中的产品，自动填充
window.addEventListener('load', function() {
    const defaultSelectedId = productSelect.value;
    if (defaultSelectedId) {
        qtyInput.value = productDefaultQty[defaultSelectedId];
    }
});
</script>

方案二：AJAX异步获取（适合产品数量多的场景） #

如果你的产品数据量很大，一次性加载所有数据会影响页面性能，那就用AJAX异步请求获取选中产品的default_qty。

1. 新增AJAX接口视图 #

# views.py
from django.http import JsonResponse
from .models import Product

def get_product_default_qty(request):
    product_id = request.GET.get('product_id')
    try:
        product = Product.objects.get(product_id=product_id)
        return JsonResponse({'default_qty': product.default_qty})
    except Product.DoesNotExist:
        return JsonResponse({'default_qty': None}, status=404)

2. 添加路由 #

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

urlpatterns = [
    path('create-component/', views.create_component, name='create_component'),
    path('product-qty/', views.get_product_default_qty, name='get_product_qty'),
]

3. 模板中的AJAX逻辑 #

<!-- create_component.html -->
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">保存组件</button>
</form>

<script>
const productSelect = document.getElementById('id_product');
const qtyInput = document.getElementById('id_qty');

// 监听选择变化，发送AJAX请求
productSelect.addEventListener('change', function() {
    const selectedId = this.value;
    if (!selectedId) {
        qtyInput.value = '';
        return;
    }

    fetch(`{% url 'get_product_qty' %}?product_id=${selectedId}`)
        .then(response => {
            if (!response.ok) throw new Error('产品不存在');
            return response.json();
        })
        .then(data => {
            qtyInput.value = data.default_qty || '';
        })
        .catch(err => {
            console.error('获取默认数量失败:', err);
            qtyInput.value = '';
        });
});

// 页面加载时触发一次change事件
window.addEventListener('load', function() {
    if (productSelect.value) {
        productSelect.dispatchEvent(new Event('change'));
    }
});
</script>

注意事项 #

• 确保表单字段的ID正确：Django ModelForm生成的字段ID格式是id_<字段名>，如果你的字段名不是product或qty，要对应修改JS里的ID。
• 方案一中的|safe过滤器是为了让Django把Python字典正确转成JavaScript对象，避免引号被转义。

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