Flask 循环未在 Bootstrap 下拉菜单中按预期迭代答案

【问题标题】：Flask loop not iterating as expected in Bootstrap dropdown menuFlask 循环未在 Bootstrap 下拉菜单中按预期迭代
【发布时间】：2019-09-19 06:10:57
【问题描述】：

我正在尝试创建一系列下拉按钮，其中下拉按钮由字典键填充，下拉项从与每个键关联的列表中填充。

目标是将字典发送到 html 模板并根据字典内容创建所有按钮。然后下拉菜单将重定向到选择的任何位置。

下面的 HTML 中的循环在我第一次运行时会起作用，但之后所有的下拉项都设置为字典中的最后一个列表。

Python 代码；

from flask import Flask, render_template
app = Flask(__name__)
names = {'Star Wars': ['Luke', 'Han', 'Chewie'], 'Avengers': ['Iron Man', 'Hulk', 'Spiderman']}

@app.route('/', methods=['GET', 'POST'])
def index():

    return render_template('indexdrop.html', names=names)

app.run(debug = True)

HTML;

....标题省略...

<div class = "jumbotron">
<div class="btn-group">
    {% for idx in names.keys() %}
    <button type="button" class="btn btn-danger"> {{ idx }}</button>
    <button type="button" class="btn btn-danger dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">{{ idx }}</span>
    </button>
    <div class="dropdown-menu">
        {% for item in names[idx] %}
        <a class="dropdown-item" href="#">{{ item }}</a>
        {% endfor %}
    </div>
    {% endfor %}
    </div>
</div>

非常感谢任何帮助！

不正确下拉菜单的屏幕截图：

【问题讨论】：

请分享您的屏幕截图。每次都在我身边工作良好
在大多数 Flask 教程和帖子中，他们都在谈论使用虚拟环境，但我没有看到一个很好的解释来解释为什么应该使用 venv。在这种情况下，我不是，也不能使用 venv。我们的 IT 小组阻止了 venv 文件夹中的所有 dll 和 exe。这可能是问题的一部分吗？ Flask 是否会在某处保存一些可能会影响此下拉菜单的数据？
我认为，您的结果运行良好。你有什么问题？
嗯，复仇者应该是钢铁侠、绿巨人和蜘蛛侠。在这种情况下，我在两个下拉菜单中都有 Luke、Han 和 Chewie...
我找到了解决方案，我回答了。

标签： python flask bootstrap-4 jinja2

【解决方案1】：

<div class="jumbotron">
    {% for idx in names.keys() %}
    <div class="btn-group">

        <button type="button" class="btn btn-danger"> {{ idx }}</button>
        <button type="button" class="btn btn-danger dropdown-toggle " data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <span class="sr-only">{{ idx }}</span>
        </button>
        <div class="dropdown-menu">
            {% for item in names[idx] %}
            <a class="dropdown-item" href="#">{{ item }}</a>
            {% endfor %}
        </div>

    </div>
    {% endfor %}
</div>

请使用<div class="btn-group"> 每个dropdown group。

来自https://v4-alpha.getbootstrap.com/components/dropdowns/，
我可以找到aria-labelledby="dropdownMenuButton"，也试过了，结果一样。

所以，我在每个dropdown group 中添加了<div class="btn-group">

这个问题是相对的bootstrap，而不是python, flask。

【讨论】：

【解决方案2】：

<div class="btn-group"> div 应该是 for 循环的一部分。目前，您只有一个 btn-group，其中有两个 dropdown-menu div。

第二个下拉菜单上的切换按钮正在寻找父级 btn-group 中的 dropdown-menu div（即带有星球大战字符的 div）。

{% for idx in names.keys() %}
    <div class="btn-group">
        ...
        ...
    </div>
{% endfor %}

【讨论】：

嗯，我觉得我试过了，循环正在写第一个按钮，但它现在对我有用！谢谢！