如何基于Laravel+Bootstrap实现带动态数据库值的Input Spinner

核心思路 #

由于你的数值是无规律离散值（125、180、200等），Bootstrap Input Spinner默认的固定step增减逻辑不适用，需要通过以下方式实现需求：

• 将数据库中的数值同步到前端JS数组，作为可选值集合
• 重写Spinner的增减行为，让它在预设数值列表中切换
• 实现下拉框与Spinner的双向同步

具体实现步骤 #

1. 传递数据库数值到前端JS #

在Laravel视图中，将$facebook集合中的amount字段转为有序JS数组：

<script>
// 从Laravel集合提取数值并转为排序后的JS数组
const facebookAmounts = @json($facebook->sortBy('amount')->pluck('amount')->toArray());
</script>

2. 修改HTML结构 #

保留原有下拉框，为Spinner添加ID方便JS操作：

<select class="form-select form-select-lg srd" id="facebookpack" aria-label="Default select example">
    <option selected value="">Select package</option>
    @foreach ($facebook as $item)
        <option value="{{ $item->amount }}">{{ $item->amount }}</option>
    @endforeach
</select>

<!-- Input Spinner 输入框 -->
<input type="number" id="facebookSpinner" value="" placeholder="Select a package">

3. 编写JS逻辑实现交互 #

初始化Spinner并自定义增减、同步逻辑：

$(document).ready(function() {
    // 初始化Bootstrap Input Spinner
    const $spinner = $("#facebookSpinner").inputSpinner({
        decrementButton: "<strong>-</strong>",
        incrementButton: "<strong>+</strong>",
        step: 1, // 临时设置，后续重写逻辑覆盖
        min: Math.min(...facebookAmounts),
        max: Math.max(...facebookAmounts)
    });

    // 下拉框切换时，同步选中值到Spinner
    $("#facebookpack").on("change", function() {
        const selectedVal = parseInt($(this).val());
        if (!isNaN(selectedVal)) {
            $spinner.val(selectedVal).trigger("change");
        } else {
            $spinner.val("").trigger("change");
        }
    });

    // 自定义Spinner减按钮行为：切换到数组中的上一个数值
    $spinner.on("inputSpinner.decrement", function(e) {
        e.preventDefault();
        const currentVal = parseInt($(this).val());
        if (isNaN(currentVal)) return;

        const currentIndex = facebookAmounts.indexOf(currentVal);
        if (currentIndex > 0) {
            $(this).val(facebookAmounts[currentIndex - 1]).trigger("change");
            $("#facebookpack").val(facebookAmounts[currentIndex - 1]);
        }
    });

    // 自定义Spinner加按钮行为：切换到数组中的下一个数值
    $spinner.on("inputSpinner.increment", function(e) {
        e.preventDefault();
        const currentVal = parseInt($(this).val());
        
        if (isNaN(currentVal)) {
            // 若当前为空，默认选中第一个数值
            $(this).val(facebookAmounts[0]).trigger("change");
            $("#facebookpack").val(facebookAmounts[0]);
            return;
        }

        const currentIndex = facebookAmounts.indexOf(currentVal);
        if (currentIndex < facebookAmounts.length - 1) {
            $(this).val(facebookAmounts[currentIndex + 1]).trigger("change");
            $("#facebookpack").val(facebookAmounts[currentIndex + 1]);
        }
    });

    // 可选：限制手动输入仅允许预设数值，同步到下拉框
    $spinner.on("blur", function() {
        const inputVal = parseInt($(this).val());
        if (facebookAmounts.includes(inputVal)) {
            $("#facebookpack").val(inputVal);
        } else {
            $(this).val("");
            $("#facebookpack").val("");
        }
    });
});

4. 额外优化（可选） #

如果数据库返回的数值是无序的，建议在控制器中提前排序：

// 在控制器中对集合按amount字段排序
$facebook = FacebookModel::all()->sortBy('amount');

确保Spinner的增减操作按从小到大的顺序切换数值。

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