HTML多选下拉菜单强制至少选择N项的实现与验证

/**
 * 检查多选下拉菜单中选中的选项数量是否满足要求
 */
function validateSelectionCount() {
    const $selectElement = $('#presents'); // 假设你的select元素ID为'presents'
    const selectedOptionsCount = $selectElement.find('option:selected').length;
    const minRequiredSelections = 2; // 设置你要求的最小选择数量

    console.log('当前选中项数量:', selectedOptionsCount);

    if (selectedOptionsCount >= minRequiredSelections) {
        console.log(`已选择 ${selectedOptionsCount} 项，满足至少 ${minRequiredSelections} 项的要求。`);
        // 在此处可以清除任何错误提示
        return true;
    } else {
        console.log(`已选择 ${selectedOptionsCount} 项，少于 ${minRequiredSelections} 项。请至少选择 ${minRequiredSelections} 项。`);
        // 在此处可以显示用户友好的错误提示，例如在页面上显示一个红色的警告信息
        return false;
    }
}

$(document).ready(function () {
    // 页面加载时执行一次检查（例如，如果有预设选中项）
    validateSelectionCount();

    // 绑定change事件，用户每次更改选择时触发验证
    $('#presents').on('change', validateSelectionCount);

    // （可选）在表单提交前进行最终验证，并阻止提交
    $('form').on('submit', function(event) {
        if (!validateSelectionCount()) {
            event.preventDefault(); // 阻止表单提交
            alert('请至少选择两个礼物！'); // 提供用户提示
        }
    });
});

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 检查是否存在名为 'presents' 的POST数据
    if (isset($_POST['presents']) && is_array($_POST['presents'])) {
        $presents = $_POST['presents'];
        $minRequiredSelections = 2; // 设置你要求的最小选择数量

        // 检查选中的选项数量是否满足要求
        if (count($presents) >= $minRequiredSelections) {
            // 验证通过，可以在这里处理数据（例如，保存到数据库）
            echo "已成功选择 " . count($presents) . " 个选项。";
            // 进一步处理数据...
        } else {
            // 验证失败，处理错误
            echo "错误：请至少选择 " . $minRequiredSelections . " 个选项。";
            // 通常会重定向回表单页面，并显示错误消息
            // header("Location: form_page.php?error=min_selection_not_met");
            // exit();
        }
    } else {
        // 没有选择任何选项，或者数据格式不正确
        echo "错误：没有选择任何选项。";
        // header("Location: form_page.php?error=no_selection");
        // exit();
    }
}
?>