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

【问题标题】：Set default value for select html element in Jinja template?在 Jinja 模板中为 select html 元素设置默认值？
【发布时间】：2015-06-09 15:59:29
【问题描述】：

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

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

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

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>

谢谢！

【问题讨论】：

标签： html flask jinja2

【解决方案1】：

您在正确的轨道上 - 但目前，您在选择框中的所有选项中打印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>

【讨论】：

太好了，正是我需要的！谢谢！

【解决方案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 中可能有更好的方法，但我还没有找到。

【讨论】：

【解决方案3】：

仅供参考-对于 HTML 5，selected="selected" 就像这样被选中：

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案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 -->

【讨论】：