使用Django for循环将下拉菜单选中值传递给Modal的实现问题

问题根因 #

• 模态框代码没有放在{% for choice in choices %}循环作用域内，id="myModal{{choice}}"中的choice变量未定义，实际渲染的模态框ID与下拉项data-target指向的ID不匹配，导致点击无响应。
• 同时引入了Bootstrap 5 CSS与Bootstrap 4 JS，二者模态框触发属性不兼容，若使用Bootstrap 4 JS可将CSS替换为对应4.x版本，若使用Bootstrap 5则需将所有data-toggle/data-target/data-dismiss属性前缀改为data-bs-。

解决方案 #

这里提供两种实现方案，可根据场景选择：

方案1：循环生成多模态框（适合选项数量少的场景）

将模态框代码放在循环内，为每个选项生成独立的模态框，修改test-modal.html代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 统一使用Bootstrap4的CSS和JS，避免版本冲突 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="dropdown">
            <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
                Create
            </button>
            <div class="dropdown-menu">
                {% for choice in choices %}
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#myModal{{choice}}">{{ choice }}</a>
                {% endfor %}
            </div>
        </div>

        <!-- 循环为每个选项生成对应模态框 -->
        {% for choice in choices %}
        <div class="modal fade" id="myModal{{choice}}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">MODAL</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                    <p>你选中了选项{{choice}}</p>
                </div>
                </div>
            </div>
        </div>
        {% endfor %}

    </body>
</html>

方案2：单模态框动态传值（适合选项数量多的场景，性能更优）

只保留一个公共模态框，通过JS动态获取选中值修改提示内容，代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="dropdown">
            <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
                Create
            </button>
            <div class="dropdown-menu">
                {% for choice in choices %}
                    <!-- 新增data-choice属性存储选中值，target指向公共模态框 -->
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#commonModal" data-choice="{{choice}}">{{ choice }}</a>
                {% endfor %}
            </div>
        </div>

        <!-- 公共模态框 -->
        <div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">MODAL</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                    <p id="choiceTip"></p>
                </div>
                </div>
            </div>
        </div>

        <!-- 动态修改模态框内容的JS逻辑 -->
        <script>
        $('#commonModal').on('show.bs.modal', function (event) {
          const trigger = $(event.relatedTarget)
          const selected = trigger.data('choice')
          $('#choiceTip').text(`你选中了选项${selected}`)
        })
        </script>

    </body>
</html>

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