python - 显示 wtforms SelectMultipleField 显示为下拉列表而不是列表-6ren

python - 显示 wtforms SelectMultipleField 显示为下拉列表而不是列表

转载作者：行者123 更新时间：2023-12-05 05:50:06

我正在使用 wtforms SelectMultipleField 呈现带有选项列表的表单。

使用普通的 Vanilla SelectField 将选项呈现为下拉列表 (dropdown)。

但是，我需要能够在列表中选择多个条目，因此想使用 SelectMultipleField。然而，这显示为列表框 ( listbox )。

这是我的表单条目代码:test = SelectMultipleField('test', choices=[(1, 'a'), (2, 'b'), (3, 'c')])

渲染代码:<a class="test" id="test">{{ form.test }}</a>

如何呈现我的 SelectMultipleField 以显示为下拉列表？

最佳答案

更新:找到“ Vanilla ”解决方案!在这里:

A similar question was asked here .我采用了基础并将其调整为 flask/jinja 工作流程:

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>

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

(这个依赖于一些 JQuery 库，但感觉与您正在寻找的东西很接近)

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>

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

(如果这个答案不是您要找的，请随时与我联系并说明原因，我会尝试调整它:D)

关于python - 显示 wtforms SelectMultipleField 显示为下拉列表而不是列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70563907/

文章推荐： css - 你可以在 sass 对象值中有一个数组吗？

文章推荐： node.js - 如何使用Yarn全局安装本地包？

文章推荐： python-3.x - 共享点文件夹应用程序权限 - 未经授权

python - WTForms - SelectMultipleField 的多值字符串
我有一个名为 TestForm 的 WTForm，具有以下属性: areas = SelectMultipleField(u'Test Areas', choices=TestArea.names()
python - 显示 wtforms SelectMultipleField 显示为下拉列表而不是列表
我正在使用 wtforms SelectMultipleField 呈现带有选项列表的表单。使用普通的 Vanilla SelectField 将选项呈现为下拉列表 (dropdown)。但是，我
javascript - Flask WTForms SelectMultipleField 限制最大选择数
现在我正在使用 Flask 构建一个 web 应用程序，包括一些 WTForms。其中之一是一个 list ，人们可以从多个选项中进行选择(因此是 SelectMultipleField)。现在我想确
python - Flask + WTForms + SelectMultipleField 和动态选择
我正在尝试使用 WTForms.SelectMultipleField 来管理表单上的一些动态选择，但我遇到了一些困难，因为它在提交验证之前在客户端进行了修改。基本上我有两个 SelectMulti
python - WTForms:如何在 SelectMultipleField 中选择选项？
可以使用 form.myfield.choices=[("1","Choice1"), ("2","Choice2")] 设置选项设置选中选项的方法是什么？最佳答案您可以在创建字段时使用 cho
python - Flask 应用程序使用 WTForms 和 SelectMultipleField
我有一个使用 WTForms 进行用户输入的 Flask 应用程序。它在表单中使用 SelectMultipleField。我似乎无法让应用程序在选择时发布该字段中的所有项目；它只发送第一个选择的项目
python - Flask-WTF SelectMultipleField 使用数据库 ID 而不是名称填充
我想以此作为序言，英语不是我的母语，如果我的任何解释含糊或没有意义，请告诉我，我会尽力使它们更清晰。我在使用 Flask-WTF 中的正确数据填充 SelectMultipleField 时遇到问题

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

python - 显示 wtforms SelectMultipleField 显示为下拉列表而不是列表