如何实现点击单选按钮在同位置切换不同下拉菜单并隐藏当前项

核心实现效果：选中group单选按钮时显示对应分组下拉表单form1，选中single单选按钮时显示对应单节点下拉表单form2，两个下拉菜单完全重叠在同一位置，切换时不会造成布局偏移。

实现逻辑说明 #

• 新增相对定位容器包裹两个表单，内部表单使用绝对定位实现同位置叠放
• 新增隐藏工具类控制表单显隐
• 监听单选按钮切换事件，动态给对应表单添加/移除隐藏类
• 页面初始化时默认选中group选项，匹配初始显示form1的状态

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单选联动表单</title>
    <style>
        div.box3-flex {
            display: flex;
            align-items: center;
            margin-top: 30px;
            gap: 10px;
        }

        h4.name {
            margin: 3px 0px;
        }

        /* 表单容器 相对定位作为叠放基准 */
        .form-wrap {
            position: relative;
            width: fit-content;
        }

        .form {
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
        }

        /* 隐藏类 */
        .hidden {
            display: none !important;
        }

        select.click-op {
            padding: 5px 160px 5px 5px;
        }

        .radio-group {
            margin-left: 220px; /* 留出下拉菜单宽度，避免被叠放的表单遮挡 */
            display: flex;
            gap: 15px;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="box3-flex">
        <h4 class="name">Name:</h4>
        <!-- 表单包裹容器 实现同位置叠放 -->
        <div class="form-wrap">
            <form id="form1" class="form">
                <select name="sendingfrom" class="click-op">
                    <option value="group-select">arm</option>
                    <option value="group-select">all</option>
                </select>
            </form>
        
            <!-- 绑定single单选按钮的表单 -->
            <form id="form2" class="form hidden">
                <select name="sendingfrom" class="click-op">
                    <option value="single-select">position</option>
                    <option value="single-select">velocity</option>
                </select>
            </form>
        </div>

        <div class="radio-group">
            <input type="radio" id="group" name="group-or-single" value="group" checked>
            <label for="group">Group</label>

            <input type="radio" id="single" name="group-or-single" value="single">
            <label for="single">Single</label>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const groupRadio = document.getElementById('group');
        const singleRadio = document.getElementById('single');
        const form1 = document.getElementById('form1');
        const form2 = document.getElementById('form2');

        // 切换表单显隐逻辑
        function toggleForm() {
            form1.classList.toggle('hidden', !groupRadio.checked);
            form2.classList.toggle('hidden', !singleRadio.checked);
        }

        // 绑定单选切换事件
        groupRadio.addEventListener('change', toggleForm);
        singleRadio.addEventListener('change', toggleForm);

        // 初始化执行一次，保证初始状态匹配
        toggleForm();
    </script>
</body>
</html>

关键改动点说明 #

• CSS层面通过position定位属性实现两个下拉菜单同位置叠放，切换时不会出现页面跳动
• 显隐控制通过class类实现，比直接操作内联样式更易维护
• 单选按钮区域预留了足够左边距，不会被绝对定位的下拉菜单遮挡
• 初始化默认选中Group选项，和form1默认显示的状态保持一致

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