下拉菜单选择触发对应表单修改opacity的JS功能实现问题

现有代码存在的问题 #

• 下拉框的onchange事件绑定错误，onchange="test"需要改为onchange="test()"，否则选中选项时不会触发执行函数
• JS逻辑中给Form1设置透明度的语句多写了多余的var关键字，属于语法错误，会导致代码运行失败
• 缺少切换选项时隐藏已有表单的逻辑，切换其他选项后之前显示的表单会一直保留在页面上
• 仅用opacity控制显隐会导致表单不可见时仍然占用页面布局位置，建议改用display属性控制更符合常规交互需求

修正后完整代码 #

<!-- 下拉菜单 -->
<select id="products" onchange="test()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<!-- 对应6个选项的表单，共用类名product-form统一控制初始样式 -->
<form id="Form1" class="product-form">
    <text>Primary side </text>
</form>
<form id="Form2" class="product-form">
    <text>选项2对应表单内容</text>
</form>
<form id="Form3" class="product-form">
    <text>选项3对应表单内容</text>
</form>
<form id="Form4" class="product-form">
    <text>选项4对应表单内容</text>
</form>
<form id="Form5" class="product-form">
    <text>选项5对应表单内容</text>
</form>
<form id="Form6" class="product-form">
    <text>选项6对应表单内容</text>
</form>

<style>
/* 所有关联表单初始隐藏 */
.product-form {
    display: none;
    /* 如果你坚持要用opacity控制，替换上面的display为下面两行即可
    opacity: 0;
    transition: opacity 0.2s;
    */
}
/* 显示状态的类 */
.product-form.show {
    display: block;
    /* 对应opacity的显示样式：opacity:1; */
}
</style>

<script type="text/javascript">
function test() {
    const selectedVal = document.getElementById("products").value;
    // 先隐藏所有表单
    const allForms = document.querySelectorAll('.product-form');
    allForms.forEach(form => form.classList.remove('show'));
    // 显示当前选中值对应的表单
    const targetForm = document.getElementById(`Form${selectedVal}`);
    if(targetForm) targetForm.classList.add('show');
}
</script>

上述代码做了逻辑优化，不需要写多层if else判断，后续你修改每个表单的内容即可直接使用。

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