title: Using Select2 with flask-wtforms
body: <p>After select2 manipulates the dropdown field the regular use of <code>form.owner_id.data</code> yields <code>None</code>. How can I extract the selected option from a select2 field. </p>
  
  <p>If I disable the select2 javascript, wtforms will work just fine and I will be able to use <code>form.owner_id.data</code>. (but it looks ugly)</p>
  
  <p><a href="https://i.stack.imgur.com/rn7GB.png" rel="noreferrer">screenshot of rendered form</a></p>
  
  <h3>forms.py</h3>
  
  <pre><code>class ProjectForm(FlaskForm):
      owner_id = SelectField('Owner:', [validators.Required()], choices=[], render_kw={"placeholder": "Owner company *"})
  </code></pre>
  
  <p>(rest of form has been truncated for simplicity)</p>
  
  <h3>views.py</h3>
  
  <pre><code>@app.route('/new_project/&lt;int:company_id&gt;', methods=('GET', 'POST'))
  def new_project(company_id):
      membership = Membership.query.filter_by(user_id=current_user.id, company_id=company_id).first()
      company = Company.query.filter_by(id=company_id).first_or_404() 
      form = ProjectForm()
  
      form.owner_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]
  
      form.client_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]
  
      form.contractor_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]
  
      form.membership_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]
  
      if request.method == 'POST':
          flash(str(form.owner_id.data), 'success')
  
      if form.validate_on_submit():
          project = Project()
          connection = Assignment()
  
          # PROJECT DETAILS
          project.title = form.title.data
          project.description = form.description.data
          project.owner_id = int(form.owner_id.data)
  </code></pre>
  
  <h3>_macro</h3>
  
  <pre><code>{% macro render_select_field(field, placeholder='Select...', label='Select an option below') %}
  &lt;div class="form-group"&gt;
      &lt;label&gt;{{ label }}&lt;/label&gt;
      &lt;select data-placeholder="{{ placeholder }}" class="select-size-xs"&gt;
          &lt;option&gt;&lt;/option&gt;
            {% for choice in field.choices %}
                &lt;option value="{{ choice[0] }}"&gt;{{ choice[1] }}&lt;/option&gt;
              {% endfor %}
      &lt;/select&gt;
      {% if field.errors %}
      {% for error in field.errors %}
        &lt;span class="help-block text-danger"&gt;&lt;i class="icon-cancel-circle2 position-left"&gt;&lt;/i&gt;{{ error }}&lt;/span&gt;
      {% endfor %}
    {% endif %}
  &lt;/div&gt;
  {% endmacro %}
  </code></pre>
  
  <h3>html</h3>
  
  <pre><code>&lt;form method="POST" action="{{ url_for('new_project', company_id=company.id) }}" enctype="multipart/form-data" role="form"&gt;
              &lt;div class="panel panel-body login-form"&gt;
                  &lt;div class="text-center"&gt;
                      &lt;div class="icon-object text-muted"&gt;&lt;i class="icon-plus2"&gt;&lt;/i&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  {{ form.hidden_tag() }}
                  &lt;div class="text-center form-group"&gt;&lt;span&gt;Project details&lt;/span&gt;&lt;/div&gt;
                  {{ new_render_field(form.title, icon="icon-quill2", class_='form-control') }}
  
                  {{ new_render_field(form.description, icon="icon-stack-text", class_='form-control', rows=10) }}
  
                  {{ render_select_field(form.owner_id, placeholder="Who's doing the work?", label="Select the owner company") }}
  
                  {{ render_select_field(form.client_id, placeholder="Where do the bills go?", label="Select the client company") }}
  
                  {{ new_render_field(form.default_client_rate, icon="icon-price-tag", class_='form-control') }}
  
                  {{ new_render_field(form.default_contractor_rate, icon="icon-price-tag", class_='form-control') }}
  
  
                  &lt;!-- THE REST OF FORM HAS BEEN TRUNCATED FOR SIMPLICITY --&gt;
                  &lt;div class="form-group"&gt;
                    &lt;button type="submit" class="btn bg-pink-400 btn-block"&gt;Create&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>