如何根据之前在Flask WTForm中选择的select字段动态生成不同的字段

Question

我想实现一个表单，生成不同的文本区域字段取决于什么值被选择在之前的下拉选择字段。上下文正在创建不同类别的项目:例如，如果用户选择"教育"，则下一个生成的字段可能是"季度/学期"的选择字段，以及"描述您的主题"的文本区域字段。我知道完成这样的功能需要javascript/jquery，但我不知道从哪里开始。我也不确定将其与我的模型和数据库联系起来的最佳方式。

在我的HTML模板中，我已经实现了if语句，但是这些当然不起作用。

我的表单类看起来像这样:

class ProjectForm(FlaskForm):
"""Create a new project, on /index"""
categories = ['Education','Software development', ...]
langs = ['Python', 'Java', ...]
name = TextAreaField('Give your project a name', validators=[
DataRequired(), Length(min=1, max=60)])
category = SelectField('Category', choices=categories, default=1)

#Education case
academic_pace = SelectField('Quarter or semester?', choices=['quarter', 'semester'], 
default=1)
subject = TextAreaField('Describe your subject matter', validators=[
DataRequired(), Length(min=10, max=100)])

#Software development case
software_language = SelectField('What programming language??', choices=langs, default=1)

submit = SubmitField('Submit')

路由如下:

from app.models import User, Project
from app.forms import LoginForm, ProjectForm ...
@app.route('/', methods=['GET', 'POST'])
@login_required
def index():
form = ProjectForm()
if form.validate_on_submit():
project = Project(name = form.name.data, category = form.category.data, 
academic_pace = form.academic_pace.data, 
subject = form.subject.data, 
software_language = form.software_language.data, 
creator=current_user)
db.session.add(project)
db.session.commit()
flash('Your project is now live!')
return redirect(url_for('index')) 

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

index . html:

...
{{ form.category.label }}<br>            
{{ form.category(cols=32, rows=4) }}<br>  
{% for error in form.category.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
{% if form.category == "Education" %}
{{ form.academic_pace.label }}<br>            
{{ form.academic_pace(cols=32, rows=4) }}<br> 
{% for error in form.academic_pace.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
{{ form.subject.label }}<br>            
{{ form.subject(cols=32, rows=4) }}<br> 
{% for error in form.subject.errors %}
<span style="color: red;">[{{ error }}]</span>
{% endfor %}
{% endif %}
...

Answer 1

我想我知道如何使用jquery做到这一点。基本上，对于每个类别的独特形式，我将它们包装在一个div中。这些div最初是隐藏的，使用style="display:none;"。然后，我使用jquery来确定从SelectField中选择了哪些选项，并相应地显示或隐藏其他表单div。下面是一种情况下的javascript:

$(document).ready(function() {
$("#category").change(function () { 
var val = $(this).val();
if (val == "learning") {
$("#learning").show();
}
else {
$("#learning").hide(); 
}
});     
});