在 Jinja 模板中为 select html 元素设置默认值？

Question

我正在使用 flask/jinja 来制作一个简单的 Web 应用程序。我有一个 table 的记录，它取自数据库 table，并由加载记录列表的网页调用。在每一行的列上都有一个下拉列表（使用 select HTML 标记完成）。

我意识到下面的代码没有做它应该做的事情，目前最后一个选项（第四个）是自动 selected 因为 selected 标签。我把它留在这里是为了展示我要实现的目标。

理想情况下，我希望它检查当前记录的状态（下面代码中的 rec.status），并根据此 select 下拉列表中的适当项目。

HTML:

     <tbody>
            {% for rec in records %}
        <tr>
          <td>{{ rec.task }}</td>
          <td>
            <select>
              <option value ="zero" selected={{rec.status==0}}>Zero</option>
              <option value ="first" selected={{rec.status==1}}>First</option>
              <option value ="second" selected={{rec.status==2}}>Second</option>
              <option value ="third" selected={{rec.status==3}}>Third</option>
            </select>
          </td>
          <td><a href={{ "/update_status/"~rec.id}}>Update</a></td>
      </tr>
      {% endfor %}
      </tbody>

谢谢！

Answer 1

您走在正确的轨道上 - 但目前，您正在 select 框中的所有选项中打印 selected。你可以尝试这样的事情只打印 selected 在正确的选项上：

    <select>
      <option value="zero"{% if rec.status==0 %} selected="selected"{% endif %}>Zero</option>
      <option value="first"{% if rec.status==1 %} selected="selected"{% endif %}>First</option>
      <option value="second"{% if rec.status==2 %} selected="selected"{% endif %}>Second</option>
      <option value="third"{% if rec.status==3 %} selected="selected"{% endif %}>Third</option>
    </select>

Answer 2

对于未来的 Google 员工：

如果您正在使用 WTForms 并想在 Jinja 中设置默认选择，您可能会梦想这样的事情可以工作：

{{ form.gender(class='form-control', value='male') }}

但事实并非如此。 default='male' 和 selected='male' 都没有（至少在 Jinja 2.8 和 WTForms 2.1 中对我来说不是）。

如果你很绝望，不想在你的 forms.py 中设置它，并且不介意有点 hacky，你可以这样做：

{{ form.gender(class='form-control hacky', value=data['gender']) }}

<script>
    var els = document.getElementsByClassName("hacky");
    for (i = 0; i < els.length; i++) {
        els[i].value = els[i].getAttribute('value');
    }
</script>

这会使用 JavaScript 在页面加载时设置它，并允许您在 SelectField 中传递默认选择，而不必弄乱您的 forms.py。在 Jinja 中可能有更好的方法，但我还没有找到它。

Answer 3

仅供参考-对于 HTML 5，selected="selected" 变成这样选择：

<option value="zero"{% if rec.status==0 %} selected{% endif %}>Zero</option>

Answer 4

只是对其他答案的一个小补充：您可以使用内联条件使其简短：

<option value="zero" {{'selected' if rec.status==0}}>Zero</option>

如果您使用另一个答案中提到的 WTForms，您可以在路由函数中设置默认值（但不要忘记按照 wtforms docs 中所述处理表单）：

form = PreviouslyDefinedFlaskForm()
form.task.default = "third"
form.process()

Answer 5

这是另一种通过传递的变量动态设置所选值的方法：

route.py

def route():

    roles = ['admin', 'user', 'guest']
    user = get_user('John Doe')
    return render_template('template.html', user=user, roles=roles)

template.html

<!-- more code -->
<div class="form-group">
    <label for="user-role">Role</label>
    <select id="user-role" class="custom-select custom-dropdown custom-form-input">
        {% for role in roles %}
            {% if role == user.role %}
                <option value="{{ role.id }}" selected>{{ role }}</option>
            {% else %}
                <option value="{{ role.id }}">{{ role }}</option>
            {% endif %}
        {% endfor %}
    </select>
</div>
<!-- more code -->

在 Jinja 模板中为 select html 元素设置默认值？

Set default value for select html element in Jinja template?

html

jinja2

flask