HTML多选下拉框（select multiple）强制最少选择项的实现与校验

<select name="presents[]" id="presents" class="vv-select2-multiple" multiple required>
    <?php 
    // 假设 get_from_group 函数用于获取选项数据
    foreach(get_from_group('person', 'any', -1, ['tipo' => 'member']) as $member):
    ?>
        <option value="<?= $member->ID ?>" <?php selected(get_user_person()->ID, $member->ID)?>>
            <?= $member->post_title; ?>
        </option>
    <?php endforeach;?>
</select>

<?php
// 假设这是处理表单提交的PHP文件
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 使用 null 合并运算符 (??) 确保即使没有选择任何项，$presents 也被初始化为空数组
    // 避免在没有选择任何项时，$presents 不存在导致报错
    $presents = $_POST['presents'] ?? []; 

    // 确保 $presents 是一个数组，并且其长度大于或等于2
    if (is_array($presents) && count($presents) >= 2) {
        // 校验通过：至少选择了两项
        echo "校验成功：已选择至少两项。选中的项ID为：" . implode(', ', $presents);
        // 在此处执行后续的业务逻辑，例如将数据保存到数据库
        // save_to_database($presents);
    } else {
        // 校验失败：未满足至少选择两项的要求
        echo "校验失败：请至少选择两项。";
        // 通常会重定向用户回表单页面，并显示错误信息
        // header('Location: form.php?error=min_selection_required');
        // exit();
    }
}
?>

$(document).ready(function () {
    const minRequiredSelections = 2; // 定义最少需要选择的项数
    const selectElement = $('#presents'); // 获取多选下拉框元素

    // 定义校验函数
    function checkMinimumSelection() {
        // 获取所有被选中的选项
        const selectedOptions = selectElement.find('option:selected');
        const selectedCount = selectedOptions.length;

        console.log(`当前选中项数量: ${selectedCount}`);

        // 根据选中项数量进行判断
        if (selectedCount >= minRequiredSelections) {
            console.log('校验通过：已满足至少选择' + minRequiredSelections + '项的要求。');
            // 可以在这里移除错误提示，或启用提交按钮
            // 例如：selectElement.removeClass('is-invalid');
            // selectElement.next('.error-message').text('');
        } else {
            console.log('校验失败：请至少选择' + minRequiredSelections + '项。');
            // 可以在这里显示错误提示，或禁用提交按钮
            // 例如：selectElement.addClass('is-invalid');
            // if (selectElement.next('.error-message').length === 0) {
            //     selectElement.after('<div class="error-message text-danger"></div>');
            // }
            // selectElement.next('.error-message').text('请至少选择' + minRequiredSelections + '项。');
        }
    }

    // 页面加载时执行一次检查，以应对预设选中项的情况
    checkMinimumSelection();

    // 绑定 change 事件，当用户选择发生变化时执行检查
    selectElement.on('change', checkMinimumSelection);

    // 可选：在表单提交前进行最终检查，以防止用户在最后时刻改变选择
    // 假设表单有一个ID为 'myForm'
    // $('#myForm').on('submit', function(e) {
    //     const selectedCount = selectElement.find('option:selected').length;
    //     if (selectedCount < minRequiredSelections) {
    //         e.preventDefault(); // 阻止表单提交
    //         alert('请至少选择' + minRequiredSelections + '项！'); // 弹出提示，或显示更友好的错误信息
    //         // 触发 checkMinimumSelection() 以更新错误提示
    //         checkMinimumSelection();
    //     }
    // });
});