烧瓶循环未在Bootstrap下拉菜单中按预期进行迭代

时间:2019-04-30 14:39:47

标签: python flask bootstrap-4 jinja2

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

目标是将字典发送到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;

.... header省略了...

<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>

非常感谢您的帮助!

下拉菜单不正确的屏幕截图: enter image description here

2 个答案:

答案 0 :(得分:1)

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

第二个下拉菜单上的切换按钮正在父dropdown-menu(即具有《星球大战》角色的div)内寻找btn-group div。

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

答案 1 :(得分:0)

<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",也尝试过,但结果相同。

因此,我将<div class="btn-group">添加到了每个dropdown group


此问题是相对的bootstrap,而不是python, flask