在单个页面中实现多个选择题表单,如何根据前一个选项字段的选项值来动态显示其他选择字段?

小弟根据书中第107页的RadioField和SelectMultipleField字段创建了几道单选题和多选题,保存在一个html页面中,然后根据纯js简单分页。现在就是需要根据Q5题所选择的前三项显示Q6题否则直接跳到Q7题,所以需要保存表单未提交时的Q5题的勾选值来判断是否跳转,就是说需要根据上一页填写的内容来决定下一页中的页面显示,在Jinja2中实在想不出思路,恳请各位指导小弟,非常感谢。Q5 Q6

forms.py:

# -*- coding: utf-8 -*-
from flask_wtf import FlaskForm
from wtforms import (
    StringField, SubmitField, RadioField, SelectField,
    SelectMultipleField, TextAreaField)
from wtforms.fields.html5 import EmailField, IntegerField
from wtforms.widgets import CheckboxInput, ListWidget
from wtforms.validators import ValidationError, DataRequired, Length, Optional, NumberRange
from app.models import Voter


class SurveyForm(FlaskForm):
    Z1 = RadioField('请问您是否同意接受访问?', choices=[
        ('1', '是'), ('2', '否')],validators=[Optional()])

    Q1 = RadioField('Q1. 请问您医院所在的城市', choices=[
        ('1', '北京'),('2', '广州'),('3', '上海'),('4', '南京'),('5', '杭州'),('6', '天津'),('7', '武汉'),
        ('8', '西安'),('9', '郑州'),('10', '成都'),('11', '重庆'),('12', '沈阳'),('13', '哈尔滨'),('14', '其他')], validators=[Optional()])
    Q1Text = StringField('其他城市,请注明')

    Q2 = StringField('Q2. 请问您所在的医院是?[开放题]', validators=[DataRequired(), Length(max=200)])

    Q3 = RadioField('Q3. 请问您所在的医院级别是?(单选题)', choices=[
        ('1', '三级医院'),('2', '二级医院'),('3', '一级医院/社区卫生服务中心')],validators=[Optional()])

    Q4 = RadioField('Q4. 请问您所在的科室是?(单选题)', choices=[
        ('1', '神经内科'),('2', '肿瘤内科'),('3', '风湿科/风湿免疫科'),('4', '心内科'),('5', '呼吸科'),('6', '其他科室'),], validators=[Optional()])
    Q4Text = StringField('其他科室,请注明')

    Q5 = RadioField('Q5. 请问您的职称是?(单选题)', choices=[
        ('1', '主任医师  '),('2', '副主任医师'),('3', '主治医师  '),('4', '住院医师  '),('5', '其他'),], validators=[Optional()])
    Q5Text = StringField('其他职称,请注明')

    Q6 = SelectMultipleField(
        'Q6. 请问在您的专业领域内,在过去半年内,您接触过以下哪些内资制药公司?(多选题)',
        choices=[
            ('1', '恒瑞医药'), ('2', '正大天晴'), ('3', '豪森医药'), ('4', '石药集团'), ('5', '齐鲁药业'), ('6', '先声药业'), ('7', '济川药业'),
            ('8', '东阳光药业'), ('9', '信达生物'), ('10', '君实生物'), ('11', '扬子江药业'), ('12', '以上这些公司都没有接触过')], \
        option_widget=CheckboxInput(), widget=ListWidget())

    Q7r1 = RadioField('恒瑞医药', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r2 = RadioField('正大天晴', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r3 = RadioField('豪森医药', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r4 = RadioField('石药集团', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r5 = RadioField('齐鲁药业', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r6 = RadioField('先声药业', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r7 = RadioField('济川药业', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r8 = RadioField('东阳光药业', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r9 = RadioField('信达生物', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r10 = RadioField('君实生物', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])
    Q7r11 = RadioField('扬子江药业', choices=[
        ('1 ', '1 '), ('2 ', '2 '), ('3 ', '3 '), ('4 ', '4 '), ('5 ', '5 '),
        ('6 ', '6 '), ('7 ', '7 '), ('8 ', '8 '), ('9 ', '9 '), ('10', '10')], validators=[Optional()])

    submit = SubmitField('Submit')

models.py:

# -*- coding: utf-8 -*-
from app import db

class Voter(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    Z1 = db.Column(db.String(200))
    Q1 = db.Column(db.String(200))
    Q1Text = db.Column(db.String(200))
    Q2 = db.Column(db.String(200))
    Q3 = db.Column(db.String(200))
    Q4 = db.Column(db.String(200))
    Q4Text = db.Column(db.String(200))
    Q5 = db.Column(db.String(200))
    Q5Text = db.Column(db.String(200))
    Q6r1 = db.Column(db.Integer)
    Q6r2 = db.Column(db.Integer)
    Q6r3 = db.Column(db.Integer)
    Q6r4 = db.Column(db.Integer)
    Q6r5 = db.Column(db.Integer)
    Q6r6 = db.Column(db.Integer)
    Q6r7 = db.Column(db.Integer)
    Q6r8 = db.Column(db.Integer)
    Q6r9 = db.Column(db.Integer)
    Q6r10 = db.Column(db.Integer)
    Q6r11 = db.Column(db.Integer)
    Q6r12 = db.Column(db.Integer)
    Q7r1  = db.Column(db.String(200))
    Q7r2  = db.Column(db.String(200))
    Q7r3  = db.Column(db.String(200))
    Q7r4  = db.Column(db.String(200))
    Q7r5  = db.Column(db.String(200))
    Q7r6  = db.Column(db.String(200))
    Q7r7  = db.Column(db.String(200))
    Q7r8  = db.Column(db.String(200))
    Q7r9  = db.Column(db.String(200))
    Q7r10 = db.Column(db.String(200))
    Q7r11 = db.Column(db.String(200))

视图函数views.py:

# -*- coding: utf-8 -*-
from flask import render_template, flash, redirect, url_for
from app import app, db
from app.models import Voter, VoterLabel
from app.forms import SurveyForm


@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
def index():
    form = SurveyForm()
    if form.validate_on_submit():
        Q6r1 = Q6r2 = Q6r3 = Q6r4 = Q6r5 = Q6r6 = Q6r7 = Q6r8 = Q6r9 = Q6r10 = Q6r11 = Q6r12 = 0
        for i in range(0, len(form.Q6.data)):
            if form.Q6.data[i] == '1':
                Q6r1 = 1
            elif form.Q6.data[i] == '2':
                Q6r2 = 1
            elif form.Q6.data[i] == '3':
                Q6r3 = 1
            elif form.Q6.data[i] == '4':
                Q6r4 = 1
            elif form.Q6.data[i] == '5':
                Q6r5 = 1
            elif form.Q6.data[i] == '6':
                Q6r6 = 1
            elif form.Q6.data[i] == '7':
                Q6r7 = 1
            elif form.Q6.data[i] == '8':
                Q6r8 = 1
            elif form.Q6.data[i] == '9':
                Q6r9 = 1
            elif form.Q6.data[i] == '10':
                Q6r10 = 1
            elif form.Q6.data[i] == '11':
                Q6r11 = 1
            elif form.Q6.data[i] == '12':
                Q6r12 = 1
        voter = Voter(
            Z1 = form.Z1.data,
            Q1 = form.Q1.data,
            Q1Text = form.Q1Text.data,
            Q2 = form.Q2.data,
            Q3 = form.Q3.data,
            Q4 = form.Q4.data,
            Q4Text = form.Q4Text.data,
            Q5 = form.Q5.data,
            Q5Text = form.Q5Text.data,
            Q6r1 = Q6r1,
            Q6r2 = Q6r2,
            Q6r3 = Q6r3,
            Q6r4 = Q6r4,
            Q6r5 = Q6r5,
            Q6r6 = Q6r6,
            Q6r7 = Q6r7,
            Q6r8 = Q6r8,
            Q6r9 = Q6r9,
            Q6r10 = Q6r10,
            Q6r11 = Q6r11,
            Q6r12 = Q6r12,
            Q7r1  = form.Q7r1.data,
            Q7r2  = form.Q7r2.data,
            Q7r3  = form.Q7r3.data,
            Q7r4  = form.Q7r4.data,
            Q7r5  = form.Q7r5.data,
            Q7r6  = form.Q7r6.data,
            Q7r7  = form.Q7r7.data,
            Q7r8  = form.Q7r8.data,
            Q7r9  = form.Q7r9.data,
            Q7r10 = form.Q7r10.data,
            Q7r11 = form.Q7r11.data,
        )
        db.session.add(voter)
        db.session.commit()
        flash(f'Thanks, the survey has been submitted!')
        return redirect(url_for('index'))
    return render_template('survey.html', form=form)

survey.html:

{% extends "base.html" %}

{% block content %}
<div class="grid-container">
    <form id="survey-form" action="" method="post">
        <div class="question" id="question_Z1">
            {{ form.csrf_token }}
            <div>
                <p>{{ form.Z1.label }}</p>
                <div id="question_Z1_main">
                    <ul>
                        {% for Z1 in form.Z1 %}
                            <li>
                                {{ Z1 }}
                                {{ Z1.label }}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <div class="question" id="question_Q1">
            <p>{{ form.Q1.label }}</p>
			<div id="question_Q1_main">
                <ul>
                    {% for Q1 in form.Q1 %}
                        <li>
                            {{ Q1 }}
                            {{ Q1.label }}
                            {% if Q1|getval == '14' %}
                                {{ form.Q1Text }}
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="question" id="question_Q2">
            <p>{{ form.Q2.label }}</p>
			<div id="question_Q2_main">
                {{ form.Q2(size=32, placeholder='请输入您所在的医院') }}
            </div>
        </div>

        <div class="question" id="question_Q3">
            <p>{{ form.Q3.label }}</p>
			<div id="question_Q3_main">
                <ul>
                    {% for Q3 in form.Q3 %}
                        <li>
                            {{ Q3 }}
                            {{ Q3.label }}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="question" id="question_Q4">
            <p>{{ form.Q4.label }}</p>
			<div id="question_Q4_main">
                <ul>
                    {% for Q4 in form.Q4 %}
                        <li>
                            {{ Q4 }}
                            {{ Q4.label }}
                            {% if Q4|getval == '6' %}
                                {{ form.Q4Text }}
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="question" id="question_Q5">
            <p>{{ form.Q5.label }}</p>
			<div id="question_Q5_main">
                <ul>
                    {% for Q5 in form.Q5 %}
                        <li>
                            {{ Q5 }}
                            {{ Q5.label }}
                            {% if Q5|getval == '5' %}
                                {{ form.Q5Text }}
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="question" id="question_Q6">
            <p>{{ form.Q6.label }}</p>
			<div id="question_Q6_main">
                <ul>
                    {% for Q6 in form.Q6 %}
                        <li>
                            {{ Q6 }}
                            {{ Q6.label }}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="question" id="question_Q7">
            <h3>
                <strong>您符合我们此次调研的要求,请继续回答后续问题。</strong>
            </h3>
            <p>
                Q7. 下面列出了一些内资制药公司,请从您对各个公司的
                <strong>整体满意度</strong>
                用1-10分打分,1分表示对公司您一点都不满意,10分表示您非常满意。(横向单选)(打分不能完全相同)
            </p>
            <div id="question_Q7_main">
                <table>
                    <tbody>
                        <tr>
                            <th scope="row">恒瑞医药</th>
                            {% for Q7_1 in form.Q7r1 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_1 }}
                                        <label for={{ Q7_1|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_1.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">正大天晴</th>
                            {% for Q7_2 in form.Q7r2 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_2 }}
                                        <label for={{ Q7_2|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_2.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">豪森医药</th>
                            {% for Q7_3 in form.Q7r3 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_3 }}
                                        <label for={{ Q7_3|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_3.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">石药集团</th>
                            {% for Q7_4 in form.Q7r4 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_4 }}
                                        <label for={{ Q7_4|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_4.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">齐鲁药业</th>
                            {% for Q7_5 in form.Q7r5 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_5 }}
                                        <label for={{ Q7_5|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_5.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">先声药业</th>
                            {% for Q7_6 in form.Q7r6 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_6 }}
                                        <label for={{ Q7_6|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_6.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">济川药业</th>
                            {% for Q7_7 in form.Q7r7 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_7 }}
                                        <label for={{ Q7_7|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_7.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">东阳光药业</th>
                            {% for Q7_8 in form.Q7r8 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_8 }}
                                        <label for={{ Q7_8|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_8.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">信达生物</th>
                            {% for Q7_9 in form.Q7r9 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_9 }}
                                        <label for={{ Q7_9|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_9.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">君实生物</th>
                            {% for Q7_10 in form.Q7r10 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_10 }}
                                        <label for={{ Q7_10|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_10.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                        <tr>
                            <th scope="row">扬子江药业</th>
                            {% for Q7_11 in form.Q7r11 %}
                                <td>
                                    <div id="wrap">
                                        {{ Q7_11 }}
                                        <label for={{ Q7_11|getid }}>
                                            <div class="item">
                                                <div class="content">{{ Q7_11.label }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </td>
                            {% endfor %}
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>



        <div class="question" id="btn">
            <p>
                您已完成全部问卷内容,感谢您的参与,请点击"Submit"按钮来提交数据。
            </p>
            {{ form.submit() }}
        </div>
    </form>
</div>
{% endblock %}

这种页面逻辑只能通过 JavaScript 来实现,你可以先默认隐藏问题 6,然后用 JavaScript 写一个监听函数监听问题 5 的 select 事件(没记错的话),然后根据选项值判断是否显示问题 6。

Jinja2 是后端渲染引擎,渲染发生在视图函数最后执行的 render_template,而响应返回后如果要对页面进行操作就只能通过客户端脚本实现,即 JavaScript。

另外代码请用三个连续反引号进行格式化,如下所示:

```
这里放你的代码
```

代码已经重新编辑,非常感谢李辉大神的回复。按照您所说的JS监听函数的思路先去尝试下看看网上的监听函数事件是怎么写的,谢谢。

不客气~