Django模板实现下拉选项目自动填充公司/版本字段

你之前尝试的模板条件判断是服务器端渲染阶段执行的，页面渲染完成后就变成静态内容了，无法响应前端用户的下拉选择操作。要实现动态填充，必须用前端JavaScript处理客户端交互逻辑，下面提供两种可行方案：

方案一：前端静态数据匹配（适合小数据量场景） #

直接将所有项目数据传到前端，通过JS匹配选中项填充字段，响应速度快。

1. 完善视图函数 #

# views.py
from django.shortcuts import render
from .models import PROJ

def software(request):
    # 查询所有项目数据并传给模板
    proj_list = PROJ.objects.all()
    return render(request, 'software.html', {'PROJS': proj_list})

2. 模板中实现渲染与填充逻辑 #

<!-- software.html -->
<div>
    <label>选择项目:</label>
    <select id="project-select">
        <option value="">请选择项目</option>
        {% for proj in PROJS %}
            <option value="{{ proj.id }}">{{ proj.project_id }}</option>
        {% endfor %}
    </select>
</div>

<div>
    <label>Company:</label>
    <input type="text" id="company-input" readonly>
</div>

<div>
    <label>Revision:</label>
    <input type="text" id="revision-input" readonly>
</div>

<!-- 用Django内置标签将项目数据转为JSON嵌入页面 -->
{% json_script PROJS "project-data" %}

<script>
// 解析页面中的项目数据
const projectData = JSON.parse(document.getElementById('project-data').textContent);

// 获取DOM元素
const projectSelect = document.getElementById('project-select');
const companyInput = document.getElementById('company-input');
const revisionInput = document.getElementById('revision-input');

// 监听下拉框选择事件
projectSelect.addEventListener('change', function() {
    const selectedProjId = this.value;
    
    // 未选择时清空字段
    if (!selectedProjId) {
        companyInput.value = '';
        revisionInput.value = '';
        return;
    }
    
    // 匹配选中的项目数据
    const matchedProj = projectData.find(proj => proj.id == selectedProjId);
    if (matchedProj) {
        companyInput.value = matchedProj.Company || '';
        revisionInput.value = matchedProj.Revision || '';
    }
});
</script>

方案二：AJAX动态获取数据（适合大数据量/敏感数据场景） #

仅在用户选择项目时，通过AJAX请求后端获取对应数据，避免一次性加载大量数据。

1. 添加API路由 #

# urls.py
urlpatterns = [
    path('software/', views.software, name='software'),
    # 新增项目详情API路由
    path('api/project/<int:proj_id>/', views.get_project_detail, name='get_project_detail'),
]

2. 编写API视图函数 #

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

def get_project_detail(request, proj_id):
    try:
        proj = PROJ.objects.get(id=proj_id)
        return JsonResponse({
            'company': proj.Company,
            'revision': proj.Revision
        })
    except PROJ.DoesNotExist:
        return JsonResponse({'error': '项目不存在'}, status=404)

3. 模板中实现AJAX逻辑 #

<!-- software.html 下拉框部分同方案一 -->
<div>
    <label>选择项目:</label>
    <select id="project-select">
        <option value="">请选择项目</option>
        {% for proj in PROJS %}
            <option value="{{ proj.id }}">{{ proj.project_id }}</option>
        {% endfor %}
    </select>
</div>

<div>
    <label>Company:</label>
    <input type="text" id="company-input" readonly>
</div>

<div>
    <label>Revision:</label>
    <input type="text" id="revision-input" readonly>
</div>

<script>
const projectSelect = document.getElementById('project-select');
const companyInput = document.getElementById('company-input');
const revisionInput = document.getElementById('revision-input');

projectSelect.addEventListener('change', function() {
    const selectedProjId = this.value;
    
    if (!selectedProjId) {
        companyInput.value = '';
        revisionInput.value = '';
        return;
    }
    
    // 发送AJAX请求获取项目详情
    fetch(`/api/project/${selectedProjId}/`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
                return;
            }
            companyInput.value = data.company || '';
            revisionInput.value = data.revision || '';
        })
        .catch(err => {
            console.error('请求失败:', err);
            alert('获取项目数据失败');
        });
});
</script>

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