flask-wtf实现下拉多选框
一般实现
一般情况下，我们用flask-wtf来实现下拉多选框的时候，大概是这样子操作的
定义Form类
forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, SelectMultipleField, SubmitField
class TestForm(FlaskForm):
title = StringField('标题')
tags = SelectMultipleField(
label='标签', choices=[('Military', '军事'), ('New', '新闻'), ('Society', '社会'), ('Technology', '科技')])
submit = SubmitField(label='提交')
视图函数
views.py
@app.route('/form_test', endpoint='form_test', methods=['POST', 'GET'])
def form_test():
form = TestForm()
if form.validate_on_submit():
title = form.title
tags = form.tags
print('title: {}, tags:{}'.format(title.data, tags.data))
return render_template('TestForm.html', form=form)
HTML
TestForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestForm</title>
</head>
<body>
<form action="{{ url_for('checker.form_test') }}" method="POST">
{{ form.hidden_tag() }}
{{ form.title.label }}
{{ form.title }}
{{ form.tags.label }}
{{ form.tags }}
{{ form.submit }}
</form>
</body>
</html>
展示页面
启动服务，打开/form_test页面
可以看到表单数据都展示出来了，但是标签这里展示并不够好，我们希望：
点击标签时才显示下拉选框（原始的这里不点击也全部显示下拉选框）能够智能多选（原始的必须每次用Ctrl+点击，才能实现同时多选）
使用Select2
资源文件
使用select2很简单，只需要下载select2对应的css和js文件即可
将下载后的静态文件，按一下目录结构放置：
/static/css/select2.min.css
/static/js/select2.min.js
修改TestForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestForm</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}" />
</head>
<body>
<form action="{{ url_for('checker.form_test') }}" method="POST">
{{ form.hidden_tag() }}
{{ form.title.label }}
{{ form.title }}
{{ form.tags.label }}
{{ form.tags }}
{{ form.submit }}
</form>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/select2.min.js') }}"></script>
<script type="text/javascript">
$('select').select2({});
</script>
</body>
</html>
展示
打开页面时
点击选框
选中后
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F5SiaUE1-1612251833406)(en-resource://database/765:0)]](https://www.jb51.cc/res/2022/10-12/02/55fb80a9f34cb16ad9696c2f85b4c0fe.jpg)
这里选框小了，调整一下宽度就可以了，这样就比原生的展示优雅得多了。
原文地址：https://blog.csdn.net/qq_42988351/article/details/113560926
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。