单选按钮联动下拉列表：根据选中项显示指定选项

需求说明 #

• 选中r1单选按钮时，下拉列表仅显示Item1（其余选项隐藏）
• 选中r2单选按钮时，下拉列表仅显示Item1、Item2、Item3
• 选中r3单选按钮时，下拉列表仅显示Item2、Item3、Item4
• 选中r4单选按钮时，下拉列表显示所有选项（可按需调整）

修改后的代码 #

main.php #

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="row">
            <div id='frm' class="w50">
                <form action="" method="post" >
                    <div>
                        <h1><u>Test</u></h1>
                        <span class="error"><?php echo isset($errors['DB']) ? $errors['DB'] : '';?></span>
                    </div>
                    <div>
                        <label>Date:</label>
                        <input id="date" type="date" name="date" <?php if(!empty($errors)) echo "value='" . $_POST["date"] . "'";?> />
                        <br><span class="error"><?php echo isset($errors['date']) ? $errors['date'] : '';?></span>
                    </div>
                    <div>
                        <label>Room:</label><br>
                        <input id="r1" type="radio" name="room" value="r1" <?php if(!empty($errors) && $_POST["room"] == 'r1') echo "checked='checked'";?> /> <label for="r1">rm1</label>
                        <input id="r2" type="radio" name="room" value="r2" <?php if(!empty($errors) && $_POST["room"] == 'r2') echo "checked='checked'";?> /> <label for="r2">rm2</label>
                        <input id="r3" type="radio" name="room" value="r3" <?php if(!empty($errors) && $_POST["room"] == 'r3') echo "checked='checked'";?> /> <label for="r3">rm3</label>
                        <input id="r4" type="radio" name="room" value="14a" <?php if(!empty($errors) && $_POST["room"] == 'r4') echo "checked='checked'";?> /> <label for="r4">rm4</label>
                        <br>
                        <span class="error"><?php echo isset($errors['room']) ? $errors['room'] : '';?></span>
                    </div>
                    <div>
                        <select id="tablnk" name="tab">
                            <option value="" data-tab="0">Choose...</option>
                            <option value="Item1" data-tab="1">Item1</option>
                            <option value="Item2" data-tab="2">Item2</option>
                            <option value="Item3" data-tab="3">Item3</option>
                            <option value="Item4" data-tab="4">Item4</option>
                        </select>
                    </div>
                    <div class="tab_content">
                        <div id="tab1" class="tab_content_block">
                            <input type="checkbox" id="ch1" name="ch[]" value="val1" data-ch="1"><label for="ch1">val1</label><br>
                            <input type="checkbox" id="ch2" name="ch[]" value="val2" data-ch="2"><label for="ch2">val2</label>
                            <input type="checkbox" id="ch3" name="ch[]" value="val3" data-ch="3"><label for="ch3">val3</label>
                            <input type="checkbox" id="ch4" name="ch[]" value="val4" data-ch="4"><label for="ch4">val4</label>
                        </div>
                        <div id="tab2" class="tab_content_block">
                            <input type="checkbox" id="ch5" name="ch[]" value="val1" data-ch="5"><label for="ch5">val1</label><br>
                            <input type="checkbox" id="ch6" name="ch[]" value="val2" data-ch="6"><label for="ch6">val2</label>
                            <input type="checkbox" id="ch7" name="ch[]" value="val3" data-ch="7"><label for="ch7">val3</label>
                            <input type="checkbox" id="ch8" name="ch[]" value="val4" data-ch="8"><label for="ch8">val4</label>
                        </div>
                        <div id="tab3" class="tab_content_block">
                            <input type="checkbox" id="ch9" name="ch[]" value="val1" data-ch="9"><label for="ch9">val1</label><br>
                            <input type="checkbox" id="ch10" name="ch[]" value="val2" data-ch="10"><label for="ch10">val2</label>
                            <input type="checkbox" id="ch11" name="ch[]" value="val3" data-ch="11"><label for="ch11">val3</label>
                            <input type="checkbox" id="ch12" name="ch[]" value="val4" data-ch="12"><label for="ch12">val4</label>
                        </div>
                    </div>
                    <div>
                        <input type="submit" id="submit" value="Submit">
                    </div>
                </form>
                <script src="js/jquery-3.5.1.min.js"></script>
                <script src="js/script.js"></script>
            </div>
        </div>
    </body>
</html>

script.js #

$(function(){
    // 定义各radio对应的允许显示的选项值
    const roomItemMap = {
        'r1': ['Item1'],
        'r2': ['Item1', 'Item2', 'Item3'],
        'r3': ['Item2', 'Item3', 'Item4'],
        'r4': ['Item1', 'Item2', 'Item3', 'Item4']
    };

    // 初始化：如果有已选中的radio，自动执行过滤
    const initialRoom = $('input[name="room"]:checked').val();
    if(initialRoom) {
        filterDropdownItems(initialRoom);
    }

    // 监听radio切换事件
    $('input[name="room"]').on('change', function() {
        const selectedRoom = $(this).val();
        filterDropdownItems(selectedRoom);
        // 重置下拉选择并隐藏所有tab内容
        $('#tablnk').val('');
        $('.tab_content_block').hide();
    });

    // 保留原有下拉列表切换逻辑
    $('#tablnk').on('change', function (e) {
        let key = $('#tablnk option:selected').data('tab');
        
        $('.tab_content').fadeOut(400, function(){
            $('.tab_content_block').hide(100, function(){
                $('.tab_content_block input:checkbox').prop('checked', false);
                $('.tab_content_block input:checkbox').removeAttr('disabled');
                $('#tab'+key).show();
            });
        }).fadeIn();
    });

    // 下拉选项过滤函数
    function filterDropdownItems(room) {
        const allowedItems = roomItemMap[room] || [];
        // 先隐藏所有选项
        $('#tablnk option').hide();
        // 显示默认项和允许的选项
        $('#tablnk option[value=""]').show();
        allowedItems.forEach(item => {
            $('#tablnk option[value="' + item + '"]').show();
        });
    }
});

代码说明 #

1. roomItemMap对象：集中管理每个单选按钮对应的可显示选项，后续调整需求只需修改此对象。
2. 初始化处理：页面加载时自动识别已选中的radio并执行过滤，适配表单提交后的状态回显场景。
3. radio切换逻辑：切换单选按钮时自动过滤下拉选项，同时重置下拉选择和tab内容，避免状态不一致。
4. 过滤函数：通过hide()和show()控制选项显示，确保仅展示符合当前radio规则的选项。

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