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

Roh*_*ani 15 html jinja2 flask

我正在使用flask/jinja来制作一个简单的Web应用程序.我有一个记录表,它从db表中获取,并由加载记录列表的网页调用.在每一行上,列上都有一个下拉列表(使用选择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>
Run Code Online (Sandbox Code Playgroud)

谢谢!

Mat*_*aly 18

您走在正确的轨道上 - 但目前,您正在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>
Run Code Online (Sandbox Code Playgroud)


小智 7

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

<option value="zero" {{'selected' if rec.status==0}}>Zero</option>
Run Code Online (Sandbox Code Playgroud)

如果您像另一个答案中提到的那样使用 WTForms,则可以在路由函数中设置默认值(但不要忘记按照wtforms 文档中所述处理表单):

form = PreviouslyDefinedFlaskForm()
form.task.default = "third"
form.process()
Run Code Online (Sandbox Code Playgroud)


Mik*_*tes 5

对于未来的 Google 员工:

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

{{ form.gender(class='form-control', value='male') }}
Run Code Online (Sandbox Code Playgroud)

但事实并非如此。无论是做default='male'还是selected='male'(在神社2.8和2.1 WTForms至少不适合我)。

如果你很绝望并且不想在你的 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>
Run Code Online (Sandbox Code Playgroud)

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