Django中实现机构选择弹窗/列表的数据渲染与表单整合咨询

第一步：修正视图函数 #

你当前的getInstitutionName视图用HttpResponse直接返回QuerySet是错误的，应该用render渲染HTML模板，把机构数据传递给模板：

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

def getInstitutionName(request):
    institutions = Institution.objects.all()
    context = {'institutions': institutions}
    # 假设你的模板文件是institution_form.html，放在templates目录下
    return render(request, 'institution_form.html', context)

第二步：HTML表单整合实现 #

下面提供两种常见的选择方式，你可以根据需求选择：

方式一：直接下拉列表选择 #

这是最简单的实现方式，直接在表单里渲染机构下拉选项：

<!-- templates/institution_form.html -->
<form method="POST">
    {% csrf_token %}
    <!-- 其他表单输入项示例 -->
    <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <!-- 机构选择下拉框 -->
    <div>
        <label for="institution">选择机构：</label>
        <select id="institution" name="institution" required>
            <option value="">请选择机构</option>
            {% for inst in institutions %}
                <option value="{{ inst.id }}">{{ inst.institutionName }}</option>
            {% endfor %}
        </select>
    </div>

    <button type="submit">提交</button>
</form>

提交后，后端可通过request.POST.get('institution')获取选中的机构ID，再关联到对应模型。

方式二：弹窗选择（模态框） #

如果需要弹窗选择，可借助Bootstrap模态框（或纯JS实现），点击按钮弹出机构列表，选择后填充到表单字段：

<!-- templates/institution_form.html -->
<!-- 引入Bootstrap资源（也可自行编写模态框样式） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<form method="POST">
    {% csrf_token %}
    <!-- 其他表单输入项示例 -->
    <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <!-- 机构选择区域 -->
    <div>
        <label for="selected_institution">选择机构：</label>
        <input type="text" id="selected_institution" readonly placeholder="点击选择机构">
        <input type="hidden" id="institution_id" name="institution_id">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#institutionModal">
            选择机构
        </button>
    </div>

    <button type="submit">提交</button>
</form>

<!-- 机构选择模态框 -->
<div class="modal fade" id="institutionModal" tabindex="-1" aria-labelledby="institutionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="institutionModalLabel">选择机构</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul class="list-group">
                    {% for inst in institutions %}
                        <li class="list-group-item" data-id="{{ inst.id }}" data-name="{{ inst.institutionName }}">
                            {{ inst.institutionName }}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
// 点击模态框中的机构选项，填充到表单并关闭模态框
document.querySelectorAll('.list-group-item').forEach(item => {
    item.addEventListener('click', function() {
        const instId = this.getAttribute('data-id');
        const instName = this.getAttribute('data-name');
        document.getElementById('selected_institution').value = instName;
        document.getElementById('institution_id').value = instId;
        // 关闭模态框
        const modal = bootstrap.Modal.getInstance(document.getElementById('institutionModal'));
        modal.hide();
    });
});
</script>

后端接收时，通过request.POST.get('institution_id')获取选中的机构ID即可。

注意事项 #

• 确保Django项目配置了正确的模板路径（在settings.py的TEMPLATES中设置DIRS）
• 提交表单时必须包含{% csrf_token %}，避免CSRF验证错误

内容的提问来源于stack exchange，提问作者Abdülkadir Furkan Yıldız