Django中如何实现选择同表下拉选项后自动填充文本框？

架构老林

2026-9-25

Django 下拉框联动填充文本框实现方案

1. 后端模型与视图配置

1.1 定义数据模型

在models.py中创建对应数据表的模型：

from django.db import models

class Item(models.Model):
    item_name = models.CharField(max_length=100, verbose_name="Item name")
    item_code = models.CharField(max_length=20, verbose_name="Item Code")

    def __str__(self):
        return self.item_name

执行makemigrations和migrate命令同步数据表结构，按需求录入示例数据即可。

1.2 定义表单类

在forms.py中创建页面使用的表单：

from django import forms
from .models import Item

class ItemSelectForm(forms.Form):
    item_selector = forms.ModelChoiceField(
        queryset=Item.objects.all(),
        label="选择物品",
        widget=forms.Select(attrs={"id": "item-select"})
    )
    item_code = forms.CharField(
        label="物品编码",
        widget=forms.TextInput(attrs={"id": "item-code", "readonly": "readonly"})
    )

1.3 视图函数配置

在views.py中编写视图逻辑，将物品ID与编码的映射关系传递到前端：

import json
from django.shortcuts import render
from .models import Item
from .forms import ItemSelectForm

def select_item_view(request):
    form = ItemSelectForm()
    # 构造ID与编码的映射字典
    code_map = {item.id: item.item_code for item in Item.objects.all()}
    context = {
        "form": form,
        "code_map": json.dumps(code_map)
    }
    return render(request, "item_select.html", context)

在urls.py中配置对应路由即可。

2. 前端模板实现

在模板文件item_select.html中编写页面代码与交互逻辑：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>物品选择</title>
</head>
<body>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">提交</button>
    </form>

    <script>
        // 解析后端传递的编码映射
        const itemCodeMap = JSON.parse('{{ code_map|safe }}');
        // 获取DOM元素
        const selectDom = document.getElementById('item-select');
        const codeDom = document.getElementById('item-code');

        // 监听下拉框选择事件
        selectDom.addEventListener('change', function() {
            const selectedId = this.value;
            // 填充对应编码到文本框
            codeDom.value = itemCodeMap[selectedId];
        });
    </script>
</body>
</html>

如果使用jQuery实现交互，可替换script部分的代码（需自行引入jQuery依赖）：

const itemCodeMap = JSON.parse('{{ code_map|safe }}');
$('#item-select').change(function() {
    $('#item-code').val(itemCodeMap[$(this).val()]);
});

如果数据量较大，也可以选择在下拉框触发change事件时发送AJAX请求到后端查询对应编码再填充，小数据量下上述方案效率更高。

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

Django中如何实现选择同表下拉选项后自动填充文本框？

1. 后端模型与视图配置 #

1.1 定义数据模型 #

1.2 定义表单类 #

1.3 视图函数配置 #

2. 前端模板实现 #

1. 后端模型与视图配置

1.1 定义数据模型

1.2 定义表单类

1.3 视图函数配置

2. 前端模板实现