HTML多选下拉框强制选择至少N个选项的实现指南

<select name="presents[]" id="presents" class="vv-select2-multiple" multiple required>
    <?php 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
// 假设表单已提交且包含名为 'presents' 的多选数据
if (isset($_POST['presents']) && is_array($_POST['presents'])) {
    $selectedPresents = $_POST['presents'];
    $minimumRequired = 2; // 定义至少需要选择的选项数量

    if (count($selectedPresents) >= $minimumRequired) {
        // 验证通过：用户至少选择了指定数量的选项。
        // 在此处执行后续业务逻辑，例如保存数据。
        echo "成功：至少选择了 {$minimumRequired} 个选项。";
    } else {
        // 验证失败：选择的选项少于指定数量。
        // 返回错误信息给用户或进行其他错误处理。
        echo "错误：请至少选择 {$minimumRequired} 个选项。";
    }
} else {
    // 没有选择任何选项，或者数据格式不正确（例如，未作为数组提交）。
    // 在多选且required的情况下，通常不会出现$_POST['presents']不存在的情况，
    // 但为了健壮性仍建议检查。
    echo "错误：请选择至少 {$minimumRequired} 个选项。";
}
?>

/**
 * 检查多选下拉框是否满足最小选择数量要求
 * @param {number} minCount - 至少需要选择的选项数量
 * @returns {boolean} 如果满足条件则返回 true，否则返回 false
 */
function checkMinimumSelections(minCount) {
    // 获取所有选中的选项
    const selectedOptions = $('#presents option:selected');
    const count = selectedOptions.length;

    // 可以在控制台输出当前选择数量，方便调试
    console.log(`当前已选择 ${count} 个选项。`);

    if (count >= minCount) {
        // 验证通过：至少选择了指定数量的选项
        console.log(`验证通过：已选择至少 ${minCount} 个选项。`);
        // 可以在此处移除错误提示，或启用提交按钮
        return true;
    } else {
        // 验证失败：选择的选项少于指定数量
        console.log(`验证失败：请至少选择 ${minCount} 个选项！`);
        // 可以在此处显示错误提示，或禁用提交按钮
        return false;
    }
}

$(document).ready(function () {
    const requiredSelections = 2; // 定义至少需要选择的选项数量

    // 页面加载时执行一次检查
    checkMinimumSelections(requiredSelections);

    // 当下拉框的选择发生变化时执行检查
    $('#presents').on('change', function() {
        checkMinimumSelections(requiredSelections);
        // 在此处可以根据返回结果更新UI，例如显示/隐藏错误消息
        // 例如：
        // if (!checkMinimumSelections(requiredSelections)) {
        //     $('#error-message').text(`请至少选择 ${requiredSelections} 个选项！`).show();
        // } else {
        //     $('#error-message').hide();
        // }
    });

    // 示例：阻止表单提交，如果验证不通过
    // 假设你的表单ID是 'myForm'
    $('form').on('submit', function(event) {
        if (!checkMinimumSelections(requiredSelections)) {
            event.preventDefault(); // 阻止表单的默认提交行为
            // 提供用户友好的提示
            alert(`请至少选择 ${requiredSelections} 个选项！`);
            // 或者将错误信息显示在页面上的特定位置
            // $('#error-message').text(`请至少选择 ${requiredSelections} 个选项！`).show();
        }
    });
});