顯示 wtforms SelectMultipleField 顯示為下拉列表而不是列表

Question

我正在使用 wtforms SelectMultipleField 來呈現帶有選項列表的表單。

使用普通的香草 SelectField 將選項呈現為下拉列表 ( dropdown )。

但是，我需要能夠 select 列表中的多個條目，因此想使用 SelectMultipleField。 但是，這顯示為列表框 ( listbox )。

這是我的表單條目代碼： test = SelectMultipleField('test', choices=[(1, 'a'), (2, 'b'), (3, 'c')])

要呈現的代碼： <a class="test" id="test">{{ form.test }}</a>

如何呈現我的 SelectMultipleField 以顯示為下拉列表？

Answer 1

（我仍在尋找更多“香草”解決方案，這個依賴於一些 JQuery 庫（也許這個庫存在是因為沒有香草方法））

鏈接到該庫

主要.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',
    'carrot',
]


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)

索引.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>

（如果這個答案不完全符合您的要求，請隨時與我聯系並說明原因，我會嘗試調整它：D）

Answer 2

有一個解決方案，但它是完全自定義的，不依賴於 wtf forms 如何顯示該字段，這就是為什么它可能不像正常的 wtf forms 輸入那樣工作。 自定義字段中的每個部分及其顯示方式很有用

1- 創建一個自定義宏來顯示字段 [創建一個名為 macros.html 的文件並將其放在模板文件夾中]

宏.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- 將“macros.html”導入包含該字段的頁面

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")

如果你要傳遞額外的 arguments，你需要在你的自定義宏 function 中定義它們

例如

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

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

顯示 wtforms SelectMultipleField 顯示為下拉列表而不是列表

問題描述

2 個解決方案

解決方案1
0 2022-01-05 17:57:15

解決方案2
0 2022-04-30 07:23:38

顯示 wtforms SelectMultipleField 顯示為下拉列表而不是列表

問題描述

2 個解決方案

解決方案1 0 2022-01-05 17:57:15

解決方案2 0 2022-04-30 07:23:38

解決方案1
0 2022-01-05 17:57:15

解決方案2
0 2022-04-30 07:23:38