Question

我正在使用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>

谢谢！

Answer 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>

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

仅是其他答案的一小部分：您可以使用内联条件使其简短：

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

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

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

Answer 4

FYI-对于HTML 5，selected =“ selected”如下所示：

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

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元素设置默认值？

5 个答案: