基于下拉菜单切换显示表单的JavaScript/HTML问题（Flask渲染）

我通过Flask渲染HTML页面，需求是根据下拉菜单选中的值切换显示对应的表单区域。按思路实现后代码没达到预期效果——所有表单从一开始就全部显示，切换下拉选项也没法切换表单，试了其他JS写法也没用，求解决建议。

原代码 #

{% extends "base.html" %}

{% block title %}Information {{configuration}} {% endblock %}
{% block content %}
<div class="px-2 py-5">

        <h3> info  {{configuration}}</h3>

        <p>Here you can input the necessary informations   </p>
        <form action="/new-simulation" method='POST'>
                <div class="mb-3">
                        <div class="mb-3">
                                <label for="info_type" class="form-label">info Type</label>
                                <select class="form-select" id="info_type" name="info_type">
                                        <option value="general">General Inquiry</option>
                                        <option value="credit">Credit Inquiry</option>
                                        <option value="payment">Payment Issue</option>
                                </select>
                            </div>

                <div class="general" id="general">
                        <label for="select">How did you find out about us?<span>*</span></label><br>
                        <select name="case" id="case-type">
                            <option value="value1">Value 1</option>
                        </select><br>
                    </div>
                
                    <div class="credit" id="credit">
                        <label for="Date of Inquiry">Date of Inquiry<span>*</span></label>
                        <input type="date">
                        <label for="Agency">Agency 3 <span>*</span></label>
                        <input type="text">         
                    </div>
                
                    <div class="payment" id="payment">
                        <label for="Service Phone Number">Service Phone Number<span>*</span></label>
                        <input type="text">
                        <label for="select">Topic<span>*</span></label><br>
                        <select name="case" id="case-type">
                            <option value="topic1">Topic 1</option>

                        </select><br><br>
                    </div>
                    <script type="text/javascript">
                           // hide all the divs
                        $('div').hide()

                        // Show and hide selected div
                        $('#info_type').change(function () {
                        var value = this.value;

                        $('div').hide()
                        $('#' + this.value).show();
                        });
                </script>


                <div class="row mb-3">
                        <div class="col">
                                <button style="margin:5px;" class="btn btn-secondary" type="submit">submit</button>
                        </div>
                </div>
        </form>
        
</div>
{% endblock %}

问题分析与修复方案 #

核心问题 #

1. 全局隐藏div错误：原代码里$('div').hide()会隐藏页面上所有div元素，包括下拉菜单的容器、提交按钮的div，不仅逻辑错误，还会导致页面结构混乱。
2. 未初始化默认显示：页面加载后没有显示默认选中的general表单，且切换时的隐藏逻辑依然错误。
3. 可能缺少jQuery依赖：如果页面没引入jQuery库，$函数会直接失效，所有JS逻辑都跑不起来。

修复步骤 #

1. 指定隐藏目标：只隐藏表单内容的三个div（#general、#credit、#payment），不要全局操作所有div。
2. 初始化默认显示：页面加载时显示默认选中的general表单。
3. 切换逻辑修正：下拉切换时，先隐藏所有表单div，再显示选中值对应的div。
4. 确保引入jQuery：在页面<head>或脚本前引入jQuery（比如用CDN：<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>）。

修复后的脚本代码 #

替换原页面中的<script>部分：

// 只隐藏非默认的表单div，初始化显示默认的general表单
$('#credit, #payment').hide();

// 下拉菜单切换逻辑
$('#info_type').change(function () {
    // 先隐藏所有表单div
    $('#general, #credit, #payment').hide();
    // 显示选中值对应的表单div
    $('#' + this.value).show();
});

额外优化建议 #

• 表单里的id="case-type"重复了，每个元素id要唯一，建议改成case-type-general和case-type-payment，避免冲突。
• 表单输入项要加上name属性，不然提交后后端拿不到数据（比如日期输入框、Agency输入框等）。

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