在引导程序前端显示 Flask 下拉菜单

时间:2021-05-24 09:13:44

标签: python html reactjs flask bootstrap-4

我有一个 Flask 后端处理数据,并且能够生成医院列表,我希望将其显示为下拉列表以供在仪表板上进行选择。这是我使用的前端代码

                <!--Hospitals select list-->
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown button
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <select class="form-select form-select-lg mb-3" name="hospital" method="GET" action="/">
                            <option value="{{hospitals[0]}}" selected>{{hospitals[0]}}</option>
                            {% for hospital in hospitals[1:] %}
                            <option value="{{hospital}}" >{{hospital}}</option>
                            {%endfor%}
                        
                        </select>
                    </div>
                  </div>

此代码没有提供可以使用的良好样式的下拉列表。请参阅下面的照片 enter image description here

我确实想获得有关解决此问题的帮助,以便我可以使用干净的下拉菜单。

1 个答案:

答案 0 :(得分:0)

这是一个前端问题。您不需要处理下拉按钮的位。相反,我会保留这一点

<select class="form-select form-select-lg mb-3" name="hospital">
    <option value="{{hospitals[0]}}" selected>{{hospitals[0]}}</option>
    {% for hospital in hospitals[1:] %}
        <option value="{{hospital}}" >{{hospital}}</option>
    {%endfor%}                        
</select>

你也可以把它放在一个 div 中,这样它就从它自己的行开始

注意:选择不需要 GET 或操作,所以我从上面的代码中删除了这些属性