jQuery 多选框高级应用：动态输入控制、数量限制与占位符设置

<div class="form-group">
    <label for="unit_of">Unit of Measure</label>
    <select class="form-control-sm selectpicker" multiple="multiple" id="unit_of" name="unit_of[]" data-selected-text-format="count">
        <!-- 假设这里是后端 PHP 生成的选项 -->
        <option>Per Minute</option>
        <option>Per Page</option>
        <option>Per Hour</option>
        <option>Per Day</option>
        <option>Per Month</option>
        <option>Per Item</option>
        <option>Per Contract</option>
        <option>Others</option>
    </select>
</div>
<input type="text" class="form-control-sm" id="rates" name="rates" style="display:none">
<input type="text" class="form-control-sm" id="rates1" name="rates1" style="display:none">
<input type="text" class="form-control-sm" id="rates2" name="rates2" style="display:none">

$(document).ready(function() {
    // 定义选项与输入框的映射关系，包括ID、默认占位符和输入类型
    const inputFieldMap = {
        "Per Page": { id: "#rates", placeholder: "Enter Rate Per Page" },
        "Per Hour": { id: "#rates1", placeholder: "Enter Rate Per Hour" },
        "Per Day": { id: "#rates2", placeholder: "Enter Rate Per Day" }
        // 可根据需要添加更多映射
    };

    // 统一管理所有受控输入框的ID，方便批量操作
    const allManagedInputIds = Object.values(inputFieldMap).map(item => item.id);

    // 更新输入框可见性、占位符和类型的函数
    function updateInputVisibility() {
        // 获取所有选中的选项值，如果没有选中则为空数组
        const selectedOptions = $("#unit_of").val() || [];

        // 1. 首先隐藏所有受控的输入框
        allManagedInputIds.forEach(inputId => {
            $(inputId).hide().val(''); // 隐藏并清空内容
        });

        // 2. 根据选中的选项显示对应的输入框，并设置其属性
        selectedOptions.forEach(optionValue => {
            if (inputFieldMap[optionValue]) {
                const inputElement = $(inputFieldMap[optionValue].id);
                inputElement.show(); // 显示输入框
                inputElement.attr("placeholder", inputFieldMap[optionValue].placeholder); // 设置占位符
                inputElement.attr("type", "number"); // 将输入类型设置为数字
            }
        });
    }

    // 绑定多选框的 change 事件
    $("#unit_of").on("change", function() {
        updateInputVisibility();
    });

    // 页面加载时执行一次，以处理初始状态（例如，如果有预选选项）
    updateInputVisibility();
});

$(document).ready(function() {
    const maxSelections = 3; // 设置最大允许选择的数量

    $("form").on("submit", function(e) {
        // 获取多选框中已选中选项的数量
        var selectionCount = $("#unit_of option:selected").length;

        // 如果选中数量超过限制
        if (selectionCount > maxSelections) {
            e.preventDefault(); // 阻止表单提交
            alert("您最多只能选择 " + maxSelections + " 个选项。"); // 弹出提示
            // 也可以使用更友好的方式显示错误信息，例如在页面上显示一个提示文本
        }
    });

    // 另一种即时反馈的方式（可选）：在选择时禁用其他选项
    $("#unit_of").on("change", function() {
        var selectedOptions = $(this).find("option:selected");
        if (selectedOptions.length >= maxSelections) {
            // 禁用所有未选中的选项
            $(this).find("option:not(:selected)").prop("disabled", true);
        } else {
            // 启用所有选项
            $(this).find("option").prop("disabled", false);
        }
        // 如果使用了 Bootstrap-select (selectpicker)，可能需要刷新其显示
        // $(this).selectpicker('refresh');
    });
});

<div class="form-group">
    <label for="unit_of">Unit of Measure</label>
    <select class="form-control-sm selectpicker" multiple="multiple" id="unit_of" 
            name="unit_of[]" data-selected-text-format="count" title="请选择计量单位...">
        <!-- 占位符选项 -->
        <option value="" disabled selected>请选择计量单位...</option> 
        <?php 
            $sql = "select * from unit_of";
            $res = mysqli_query($db_handle, $sql);
            while ($list = mysqli_fetch_assoc($res)) {
                $unit_of = $list['unit_of'];
        ?>
        <option><?= $unit_of; ?></option>
        <?php
            }
        ?>
    </select>
</div>