Set default value for select html element in Jinja template?

问题

I'm using flask/jinja in order to make a simple web application. I have a table of records which is taken from a db table, and is called by a webpage which loads the list of records. On each row there is a dropdown list (done using the select HTML tag) on a column.

I realize the below code doesn't do what its supposed to, currently the last option (fourth) is automatically selected because of the selected tag. I've left it in to try show what I'm trying to implement.

Ideally I'd want it to check the current record's status (rec.status in the code below) and depending on that, select the appropriate item in the dropdown.

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>

Thanks!

回答1:

You're on the right track - but currently, you're printing selected in all the options in your select box. You can try something like this to only print selected on the correct option:

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

For the future Googlers:

If you're using WTForms and want to set the default selection in Jinja, you might dream that something like this could work:

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

but it doesn't. Neither does default='male' nor selected='male' (at least not for me in Jinja 2.8 and WTForms 2.1).

If you're desperate and don't want to set it in your forms.py and don't mind getting a little hacky, you can do this:

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

This sets it on page load using JavaScript and lets you pass the default selection in the SelectField without having to mess with your forms.py. There's probably a better way of doing this in Jinja, but I haven't found it yet.

回答3:

FYI- for HTML 5, selected="selected" becomes just selected like this:

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

回答4:

Just a small addition to the other answers: you can keep it short by using inline conditions:

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

And if you are using WTForms like mentioned in another answer, you can set the default value in your route function (but don't forget to process the form as described in the wtforms docs):

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

来源：https://stackoverflow.com/questions/29451208/set-default-value-for-select-html-element-in-jinja-template