Flask表单提交后CSS列表样式异常及空白项目符号问题求助

核心问题分析 #

• 主观题提交后，空白选项会显示无序列表的空白项目符号
• 用表单复选框控制样式时，会修改所有已存在题目的样式，无法单独标记新增主观题

解决方案步骤 #

1. 后端：给题目模型增加类型标记 #

在questions模型中添加q_type字段，区分选择题（mcq）和主观题（desc）：

class questions(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    question = db.Column(db.String(500), nullable=False)
    option1 = db.Column(db.String(200))
    option2 = db.Column(db.String(200))
    option3 = db.Column(db.String(200))
    option4 = db.Column(db.String(200))
    marks = db.Column(db.Integer, nullable=False)
    chapter = db.Column(db.String(100), nullable=False)
    # 添加类型字段，默认值为选择题
    q_type = db.Column(db.String(20), default='mcq')

2. 后端：修改提交逻辑，保存题目类型 #

更新home路由，根据复选框值设置题目类型，主观题可清空选项字段：

@app.route('/home', methods=['GET', 'POST'])
@login_required
def home():    
    form = QuestionForm()
    if form.validate_on_submit():
        # 判断题目类型
        q_type = 'desc' if request.form.get('typesel') == 'desc' else 'mcq'
        # 主观题选项设为空，选择题保留输入值
        new_question = questions(
            question=form.question.data.strip(),
            option1=form.option1.data.strip() if q_type == 'mcq' else '',
            option2=form.option2.data.strip() if q_type == 'mcq' else '',
            option3=form.option3.data.strip() if q_type == 'mcq' else '',
            option4=form.option4.data.strip() if q_type == 'mcq' else '',
            marks=int(form.marks.data),
            chapter=form.chapter.data.strip(),
            q_type=q_type
        )
        db.session.add(new_question)
        db.session.commit()
        return redirect(url_for('home'))     

    que = questions.query.order_by(questions.chapter).all()
    return render_template('home.html', que=que, form=form)

3. 前端：修复空白项目符号问题 #

在Jinja模板中，仅渲染非空选项，或主观题直接隐藏选项列表：

{% for q in que %}
<div class="des1">
    <input class="m-2 p-2" type="checkbox" name="fq" value="{{ q.id }}" id="selq{{ q.id }}">
    <label class="form-check-label" for="selq{{ q.id }}">          
        <a class="btn btn-sm-light" href="/remove/{{q.id}}" role="button"><i class="bi bi-trash"></i></a> 
        <a class="btn btn-sm-light" href="/edit/{{q.id}}" data-toggle="modal" data-target="#editquesmodal{{q.id}}" role="button"><i class="bi bi-pencil-square"></i></a>   
        Chapter: {{q.chapter}}, Marks: {{ q.marks }}
    </label>
    <div class="des2">
        <h6 class="mt-2"> {{ q.question }} </h6>
        <!-- 仅选择题显示选项列表，且只渲染非空选项 -->
        {% if q.q_type == 'mcq' %}
            <ul>
                {% if q.option1 %}<li class="mainqblock">{{ q.option1 }}</li>{% endif %}
                {% if q.option2 %}<li class="mainqblock">{{ q.option2 }}</li>{% endif %}
                {% if q.option3 %}<li class="mainqblock">{{ q.option3 }}</li>{% endif %}
                {% if q.option4 %}<li class="mainqblock">{{ q.option4 }}</li>{% endif %}
            </ul>
        {% endif %}
    </div>
</div>   
{% endfor %}

4. 前端：修复样式全局修改问题 #

每个题目通过自身的q_type字段判断样式，不再依赖全局变量：

<!-- 替换原有选项列表逻辑 -->
{% if q.q_type == 'mcq' %}
    <ul>
        {% if q.option1 %}<li class="mainqblock">{{ q.option1 }}</li>{% endif %}
        {% if q.option2 %}<li class="mainqblock">{{ q.option2 }}</li>{% endif %}
        {% if q.option3 %}<li class="mainqblock">{{ q.option3 }}</li>{% endif %}
        {% if q.option4 %}<li class="mainqblock">{{ q.option4 }}</li>{% endif %}
    </ul>
{% else %}
    <!-- 主观题添加自定义提示 -->
    <p><em>主观题：请直接作答</em></p>
{% endif %}

可选优化：表单动态隐藏选项字段 #

用JavaScript实现勾选主观题时隐藏选项输入框，提升体验：

<script>
document.getElementById('typesel').addEventListener('change', function() {
    const optionGroups = document.querySelectorAll('.form-group.row:has([name^="option"])');
    optionGroups.forEach(group => {
        group.style.display = this.checked ? 'none' : 'flex';
    });
});
</script>

将脚本放在模板{% endblock %}标签之前即可。

内容的提问来源于stack exchange，提问作者DBV