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

ao218c7q  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(202)

我正在为我的应用程序创建一个表单。目前,我想使用用户的性别,但我不知道如何在我的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;这意味着直到现在我还没有完全理解它是如何工作的。*
thtygnil

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>

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

相关问题