Flask-WTF中如何根据选项选中状态控制表单字段显隐

你的代码不生效核心是3个明确的错误，按下面改完就能实现需求：

• 最核心的问题：<script>标签如果加了src属性引入外部脚本，标签内部写的所有代码都会被浏览器直接忽略，不会执行。你把jQuery引入和自定义业务逻辑写在了同一个script标签里，等于你写的交互逻辑从来没有运行过。
• 其次是DOM操作范围不对：你之前的逻辑只隐藏了relImp的下拉选择框本身，它对应的题目标签、Bulma要求的外层.field容器还会留在页面上，就算JS正常运行，页面上也会残留半截内容。
• 最后是脚本执行逻辑冗余，IIFE写法没有正确传参、和window.onload混用，容易出现时机问题。

具体修改步骤 #

1. 先调整HTML结构：给relImp对应的整块题目容器加独立id方便整体控制，把引入jQuery和自定义脚本拆成两个独立的script标签，修正后的完整代码如下：

<form method="POST" action="/getStarted" role="form">
{{ form.csrf_token }}

<div class="field">
    <div class="control">
        {{ form.relAffil.label(class_="label") }}
        <div class="select is-multiple">
        {{ form.relAffil(size=3) }}
        </div>
    </div>
</div>

<br>
<!-- 给整块relImp题目加外层id，方便整体显示/隐藏 -->
<div class="field" id="relImpBlock">
    <div class="control">
        {{ form.relImp.label(class_="label") }}
        <div class="select is-rounded">
        {{ form.relImp() }}
        </div>
    </div>
</div>
</form>

<!-- 单独引入jQuery，这个标签内部不要写任何其他代码 -->
<script src="jquery-3.6.0.min.js"></script>
<!-- 自定义交互逻辑单独放一个script标签 -->
<script>
$(function() {
    // 抽离显示/隐藏逻辑，初始化和值变化时都能复用
    function updateRelImpVisibility() {
        const selectedOptions = $("#relAffil").val() || [];
        selectedOptions.length === 0 ? $("#relImpBlock").hide() : $("#relImpBlock").show();
    }

    // 页面加载完成先执行一次，实现默认隐藏
    updateRelImpVisibility();
    // 监听多选框的选中变化，实时切换显示状态
    $("#relAffil").on("change", updateRelImpVisibility);
});
</script>

2. 额外的样式修正：你之前给select标签本身也加了select类，这个是Bulma的容器类，只需要加在select的外层包裹div上，select标签本身不需要加，不然可能出现样式错位，上面的代码里已经把这部分多余的类去掉了。

排查要点 #

如果改完还是不生效，按下面顺序检查：

• 打开浏览器开发者工具的Network面板，确认jquery-3.6.0.min.js加载成功，状态码为200，如果是404说明你放jQuery的文件路径不对。
• 打开开发者工具的Elements面板，确认Flask渲染出来的多选框id确实是relAffil，Flask-WTF默认会用字段名作为元素id，如果你给表单加了前缀，对应修改jQuery选择器里的id即可。

实现效果：页面初始加载时，宗教信仰重要程度的评分题完全隐藏；多选框选中任意选项时评分题自动显示；清空所有选中项时评分题再次隐藏。

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