Django：无需JavaScript实现下拉选择后更新字段

当然可行！不过得先说明：完全不用JavaScript的话，没法做到前端实时自动更新，但咱们可以通过「用户选择下拉后提交表单，后端处理并返回更新后的数据」的纯后端方案实现需求。下面一步步讲具体实现：

核心思路 #

没有JS的情况下，所有逻辑都得靠后端触发——用户选好下拉选项后，要么手动点提交按钮，要么用一行极简的JS自动提交（如果能接受的话），后端接收到请求后，根据选中的下拉值计算/获取对应字段的目标值，更新formset里的对应表单，最后重新渲染页面展示更新后的结果。

具体实现步骤 #

1. 定义表单与Formset #

先假设你的模型是这样的（根据实际业务调整）：

from django.db import models

class Category(models.Model):
    name = models.CharField(max_length=100)
    default_price = models.DecimalField(max_digits=10, decimal_places=2)  # 比如每个分类对应默认价格

class Product(models.Model):
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    # 其他业务字段...

对应的表单和Formset：

from django import forms
from django.forms import formset_factory
from .models import Product

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = ['category', 'price']  # 按需添加其他字段

# 定义Formset，extra=1表示默认显示1个空表单
ProductFormSet = formset_factory(ProductForm, extra=1)

2. 视图层处理逻辑 #

在视图里要处理GET和POST请求：GET请求初始化formset；POST请求接收用户的选择，更新对应字段后再返回formset。

from django.shortcuts import render
from .forms import ProductFormSet

def product_formset_view(request):
    if request.method == 'POST':
        formset = ProductFormSet(request.POST)
        if formset.is_valid():
            # 遍历每个表单，根据选中的category更新price
            for form in formset:
                selected_category = form.cleaned_data.get('category')
                if selected_category:
                    # 这里根据业务逻辑获取对应值，比如取分类的默认价格
                    target_price = selected_category.default_price
                    # 更新表单的初始值，这样渲染时会显示更新后的价格
                    form.initial['price'] = target_price
            # 如果需要保存到数据库，就调用formset.save()；如果只是预览，跳过这步
            # formset.save()
    else:
        formset = ProductFormSet()
    
    return render(request, 'product_formset.html', {'formset': formset})

3. 模板层渲染 #

在模板里渲染formset，加上提交按钮，让用户可以触发更新：

<form method="post">
    {% csrf_token %}
    {{ formset.management_form }} {# 这行必须加，Django Formset的核心配置 #}
    
    {% for form in formset %}
        <div class="form-group">
            {{ form.category.label_tag }} {{ form.category }}
            {{ form.price.label_tag }} {{ form.price }}
            {% if form.errors %}
                <div class="text-danger">{{ form.errors }}</div>
            {% endif %}
        </div>
    {% endfor %}
    
    <button type="submit" class="btn btn-primary">更新字段值</button>
</form>

可选：极简JS实现自动提交（如果能接受） #

如果你只是不想写复杂的JS逻辑，而可以接受一行简单代码来优化体验，那可以给下拉框加个onchange事件，选完自动提交表单：

{{ form.category.label_tag }} 
<select name="{{ form.category.name }}" id="{{ form.category.id_for_label }}" onchange="this.form.submit()">
    {% for choice in form.category.field.choices %}
        <option value="{{ choice.0 }}" {% if choice.0 == form.category.value %}selected{% endif %}>{{ choice.1 }}</option>
    {% endfor %}
</select>

这样用户选完下拉就自动提交，页面刷新后就能看到更新后的字段，体验更流畅，但只用到了一行极简JS，完全没有复杂逻辑，符合“偏好不使用JS”的需求。

注意事项 #

• 无JS方案的本质是后端驱动的页面刷新，每次更新都会重新加载页面，这是无法避免的
• 如果是批量处理多个表单，要确保遍历formset的每个实例，根据各自的下拉值处理对应字段
• 一定不要漏掉模板里的{{ formset.management_form }}，这是Django Formset正常工作的必要部分

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