Display wtforms SelectMultipleField display as drop-down and not list

Question

I am using wtforms SelectMultipleField to render a form with a list of choices.

Using a plain vanilla SelectField renders the choices as a drop-down (dropdown).

However, I need to be able to select multiple entries in the list, hence want to use SelectMultipleField. This, however, displays as a listbox (listbox).

This is my code for the form entries: test = SelectMultipleField('test', choices=[(1, 'a'), (2, 'b'), (3, 'c')])

Code to render: <a class="test" id="test">{{ form.test }}</a>

How can I render my SelectMultipleField to display as a dropdown?

Does this solve your issue? https://stackoverflow.com/q/21812223/15751564 — darth baba, Jan 03 '22 at 09:58
Not really - the size parameter defines the number of list entries, not if it renders as a dropdown or not. — Håvard Magnussen, Jan 03 '22 at 10:43

barni · Answer 1 · 2022-01-05T19:03:52.953

UPDATE: found 'vanilla' solution! Here it is:

A similar question was asked here. I took the base and adjusted it to flask/jinja workflow:

main.py:

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms.fields import SelectMultipleField, SubmitField
from wtforms import widgets

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'


choices = [
    'apple',
    'banana',
    'cherry',
]


# This code from WTForms docs, this class changes the way SelectMultipleField
# is rendered by jinja
# https://wtforms.readthedocs.io/en/3.0.x/specific_problems/
class MultiCheckboxField(SelectMultipleField):
    """
    A multiple-select, except displays a list of checkboxes.

    Iterating the field will produce subfields, allowing custom rendering of
    the enclosed checkbox fields.
    """
    widget = widgets.ListWidget(prefix_label=False)
    option_widget = widgets.CheckboxInput()


class Form(FlaskForm):
    global choices
    select_multiple_field = MultiCheckboxField(choices=choices)
    submit = SubmitField()


@app.route('/', methods=['GET', 'POST'])
def index():
    form = Form()

    if request.method == 'POST':
        # Getting selected options
        form_data = form.select_multiple_field.data
        print(form_data)

    return render_template(
        'index.html',
        form=form,
    )


if __name__ == "__main__":
    app.run(debug=True)

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

    <style>
        .dropdown-check-list {
            display: inline-block;
        }

        .dropdown-check-list .anchor {
            position: relative;
            cursor: pointer;
            display: inline-block;
            padding: 5px 50px 5px 10px;
            border: 1px solid #ccc;
        }

        .dropdown-check-list .anchor:after {
            position: absolute;
            content: "";
            border-left: 2px solid black;
            border-top: 2px solid black;
            padding: 5px;
            right: 10px;
            top: 20%;
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }

        .dropdown-check-list .anchor:active:after {
            right: 8px;
            top: 21%;
        }

        .dropdown-check-list ul.items {
            padding: 2px;
            display: none;
            margin: 0;
            border: 1px solid #ccc;
            border-top: none;
        }

        .dropdown-check-list ul.items li {
            list-style: none;
        }

        .dropdown-check-list.visible .anchor {
            color: #0094ff;
        }

        .dropdown-check-list.visible .items {
            display: block;
        }
    </style>

    <form action="{{ url_for('index') }}" method="POST">
        {{ form.hidden_tag() }}
        <div id="list1" class="dropdown-check-list" tabindex="100">
            <span class="anchor">Select Fruits</span>

            {{ form.select_multiple_field(class="items") }}

        </div>
        {{ form.submit }}
    </form>

    <script>
        var checkList = document.getElementById('list1');
        checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (checkList.classList.contains('visible'))
                checkList.classList.remove('visible');
            else
                checkList.classList.add('visible');
        }
    </script>

</body>

</html>

==========================================

(this one depends on some JQuery library, but it feels closely to what you are looking for)

link to that library

main.py:

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms.fields import SelectMultipleField, SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'


choices = [
    'apple',
    'banana',
    'cherry',
]


class Form(FlaskForm):
    global choices
    select_multiple_field = SelectMultipleField(choices=choices)
    submit = SubmitField()


@app.route('/', methods=['GET', 'POST'])
def index():
    form = Form()

    if request.method == 'POST':
        # Getting selected options
        form_data = form.select_multiple_field.data
        print(form_data)

    return render_template(
        'index.html',
        form=form,
    )


if __name__ == "__main__":
    app.run(debug=True)

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>
</head>

<body>

    <style>
        select {
            width: 20%;
        }
    </style>

    <form action="{{ url_for('index') }}" method="POST">
        {{ form.hidden_tag() }}
        {{ form.select_multiple_field(**{"multiple": "multiple"}) }}
        {{ form.submit }}
    </form>

    <script>
        $(function () {
            $('select').multipleSelect({
                multiple: true,
                multipleWidth: 60
            })
        })
    </script>

</body>

</html>

==========================================

(feel free to contact me if this answer was not exactly what you are looking for and tell why so, I'll try to adjust it :D)

Thanks! This solves my issue. Be aware there is a bug in the choices list - needs to be a list of tuples with value and label: (1, 'apples'). Also, the first version doesn't render as it should - the style isn't removing the listbox. I haven't debugged, as the jquery version fits better with my setup, and that renders just fine. While researching, I actually implemented a different version based on the select2 javascript lib. Check out docs here: https://select2.org/. Now I have two options - great! (Not able to upvote this answer as I don't have enough reputations....) — Håvard Magnussen, Jan 10 '22 at 06:50

Mahmoud Magdy · Answer 2 · 2022-04-30T10:02:00.790

There is a solution but it is completely custom that doesn't depend on how wtf forms display the field, that's why it probably doesn't behave like normal wtf forms input. It is useful to customize each part in the field and how to display it

1- Create a custom macro to display the field [create a file named macros.html and place it inside the templates folder]

macros.html

{% macro multi_bootstrap_select_field(field, class="", options_classes="") %}
   {% if field %}
     {{ field.label }}: <select {% if field.id  %}id="{{field.id}}"{% endif %} {% if field.name  %}name="{{field.name}}"{% endif %} {% if class  %} class="{{class}}"{% endif %} {% if field.placeholder  %} placeholder="{{field.placeholder}}"{% endif %} {% if field.flags.required %}"required=required"{%endif%} {% if field.type|lower == 'selectmultiplefield' or field.type|lower == 'multicheckboxfield' %}multiple="multiple"{% endif %}>
       {% if field.choices %}
         {% for choice_index in range(field.choices|length)  %}
           {% if field.choices[choice_index]|length == 2 %}
             <option {% if field.name %}name="{{field.name}}"{% endif %} value="{{field.choices[choice_index][0]}}">{{field.choices[choice_index][1]}}</option>
           {% endif %}
         {% endfor %}
       {% endif %}
     </select>
     {% for error in field.errors %}
       <div class="alert alert-danger" role="alert">{{ error }}</div>
     {% endfor %}
   {% endif %}
{% endmacro %}

2- Import "macros.html" into the page containing the field

index.html

{% from 'macros.html' multi_bootstrap_select_field %}
 
{{ multi_bootstrap_select_field(form.nums, class="form-control") }}

forms.py

from flask_wtf import FlaskForm
from wtforms import SubmitField, SelectMultipleField, widgets
from wtforms.validators import InputRequired

class MultiCheckboxField(SelectMultipleField):
    widget = widgets.ListWidget(prefix_label=False)
    option_widget = widgets.CheckboxInput()



class addLyrics(FlaskForm):
    nums = MultiCheckboxField('Tags',
                           coerce=str,
                           choices=[(1, 'one'), (2, 'two'), (3, 'three')],
                           validators=[InputRequired()])
    submit = SubmitField("Create")

If you are going to pass additional arguments, you need to define them in your custom macro function

for example

{% macro multi_bootstrap_select_field(field, class="", options_classes="", placeholder="") %}

{{ multi_bootstrap_select_field(form.nums, class="form-control", placeholder="something") }}

Display wtforms SelectMultipleField display as drop-down and not list

2 Answers2