Django中向Bootstrap模态框表单传值：仅显示首个值问题

嘿，这个问题我太熟了！核心原因很简单——你在循环里给所有模态框用了同一个id="modal-default2"，HTML里的id是全局唯一标识，所以不管点哪个按钮，浏览器只会找到第一个匹配这个id的模态框，自然就只显示第一条数据啦。

下面是具体的修复方案，直接改你的模板代码就行：

修复步骤核心思路 #

1. 给每个循环生成的模态框分配唯一的id（比如结合company.id）
2. 让对应按钮的data-target指向这个唯一id
3. 确保表单的删除URL正确关联当前公司的id

修改后的代码示例 #

{% for company in companys %}
<tr>
    <td>{{ company.name }}</td>
    <td>{{ company.desc }}</td>
    <td align="center">
        <!-- 按钮的data-target改为唯一id，绑定当前公司的模态框 -->
        <button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default-{{ company.id }}">
            delete
        </button>
        <!-- 模态框id加入company.id，保证每个模态框唯一 -->
        <div class="modal fade" id="modal-default-{{ company.id }}">
            <div class="modal-dialog">
                <!-- 表单action带上company.id，确保删除对应的数据 -->
                <form method="post" action="{% url 'your-delete-url-name' company.id %}">
                    {% csrf_token %} <!-- 别忘了Django的csrf令牌，否则POST请求会被拒绝 -->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">确认删除</h4>
                        </div>
                        <div class="modal-body">
                            <!-- 显示当前要删除的公司名称，让用户明确操作对象 -->
                            <p>你确定要删除公司 <strong>{{ company.name }}</strong> 吗？</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-danger">确认删除</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </td>
</tr>
{% endfor %}

额外注意事项 #

• 把代码里的your-delete-url-name替换成你在urls.py中配置的删除视图的URL名称，确保这个URL接受company.id作为参数
• 一定要保留{% csrf_token %}，这是Django防止跨站请求伪造的必要设置
• 模态框里显示公司名称是为了提升用户体验，避免误删数据

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