Bootstrap 如何使用Flask-SQLAlchemy SelectField实现引导数据列表

ao218c7q 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(203)

我正在为我的应用程序创建一个表单。目前，我想使用用户的性别，但我不知道如何在我的HTML中优雅地实现该字段。
我的大部分HTML都使用Bootstrap，所以我想继续使用Bootstrap，并使用他们的Datalists来显示各种选项。
Datalists的 Bootstrap 代码：

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

我是如何实现表单的，例如StringField：

<form method="post" novalidate>
    {{ form.hidden_tag() }}
    <div class="form-group">
        {{ form.username.label }}
        {{ form.username(class_="form-control", size=32) }}
    </div>
  ...

如何以类似的方式实现Flask-SQLAlchemy的SelectField？

注：我不太熟悉如何Bootstrap适合Jinja;这意味着直到现在我还没有完全理解它是如何工作的。*

twitter-bootstrap

来源：https://stackoverflow.com/questions/66660744/how-can-i-implement-bootstraps-datalists-with-flask-sqlalchemy-selectfield

1条答案

按热度按时间

thtygnil1#

我有同样的问题;但是没有人接。经过一番挣扎，我终于使它工作了。forms.py:

class fiscalYearForm(FlaskForm):
        fy_timeframe = SelectField(
            "Please Select Fiscal Quarter",
            choices=[
                ('FY2022 Q4', 'FY2022 Q4'),
                ('FY2022 Q3', 'FY2022 Q3'),
                ('FY2022 Q2', 'FY2022 Q2'),
                ('FY2022 Q1', 'FY2022 Q1'),
            ],
            validators=[DataRequired()],
        )

html文件：

<form action="" method="post">
        {{ form.hidden_tag() }}
        <div class="mb-3">
            {{ form.fy_timeframe.label(class="form-label") }}
            <input class="form-control" list="fylistOptions" placeholder="Type to search...">
            <datalist id="fylistOptions">
                    {{form.fy_timeframe(class="form-control form-control-sm")}}
            </datalist>
        </div>
        <div class="mb-3">
            {{ form.submit(class="btn btn-primary" }}
        </div>
    </form>

这对我很有效，希望对别人有帮助。

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何使用Flask-SQLAlchemy SelectField实现引导数据列表

1条答案

相关问题

热门标签

最新问答