wtforms.fields.SelectMultipleField()-支持多选的下拉选择字段

发布时间：2023-12-24 22:52:15

wtforms.fields.SelectMultipleField() 是 WTForms 中的一个字段类，用于创建一个支持多选的下拉选择字段。

使用该字段类可以创建一个下拉选择框，用户可以选择多个选项。用户的选择结果会以一个列表的形式进行提交。

下面是一个使用 wtforms.fields.SelectMultipleField() 的例子：

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

# 创建表单类
class MyForm(Form):
    # 创建一个 SelectMultipleField 字段
    choices = [('apple', 'Apple'), ('banana', 'Banana'), ('orange', 'Orange')]
    fruits = SelectMultipleField('Fruits', choices=choices)
    submit = SubmitField('Submit')

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm(request.form)
    
    if request.method == 'POST' and form.validate():
        # 获取用户的选择结果
        selected_fruits = form.fruits.data
        return render_template('result.html', fruits=selected_fruits)
        
    return render_template('index.html', form=form)

if __name__ == '__main__':
    app.run()

在上述例子中，我们首先创建了一个表单类 MyForm，其中包含一个 SelectMultipleField 类型的字段 fruits，用于选择水果。choices 参数用于指定下拉选项的选择，每个选项是一个元组，包含选项的值和显示文本。

接着，在路由函数中，我们创建了一个表单实例 form，然后判断请求的方法是 GET 还是 POST。如果是 POST 方法且表单数据验证通过，我们通过 form.fruits.data 获取用户选择的水果，并将结果传递给结果页面进行展示。

最后，我们分别创建了一个 index.html 和 result.html 模板文件，用于展示表单和结果。

index.html 模板文件的内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multi-select Field Example</title>
</head>
<body>
    <h1>Select Fruits</h1>
    
    <form method="POST" action="/">
        {{ form.csrf_token }}
        
        <div>
            {{ form.fruits.label }}<br>
            {{ form.fruits.multiple() }}
        </div>
        
        {{ form.submit() }}
    </form>
</body>
</html>

result.html 模板文件的内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Result</title>
</head>
<body>
    <h1>Result</h1>
    
    <p>You have selected:</p>
    
    <ul>
        {% for fruit in fruits %}
            <li>{{ fruit }}</li>
        {% endfor %}
    </ul>
</body>
</html>

在 index.html 中，我们使用 form.fruits.multiple() 方法来生成多选的下拉选择框。

最后，我们运行应用并访问首页，将会看到一个展示水果选项的下拉选择框。选择感兴趣的水果后，点击提交按钮，将会跳转到结果页面，展示用户的选择结果。

以上就是使用 wtforms.fields.SelectMultipleField() 创建支持多选的下拉选择字段的示例。