如何根据表单中先前选择的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(); 
            }
        });     
});