页面加载报counterUp函数错误，Select2多选框功能失效求助

一、先解决 counterUp is not a function 报错 #

这个错误是因为jQuery的counterUp插件未正确引入或加载顺序错误，按以下步骤修复：

1. 确保插件依赖正确引入 #

counterUp依赖jQuery和Waypoints，加载顺序必须是：

• 先加载jQuery
• 再加载Waypoints
• 最后加载counterUp

如果用CDN引入，在页面<head>或</body>前添加：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Waypoints（counterUp依赖） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<!-- counterUp插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.counterup/2.1.0/jquery.counterup.min.js"></script>

如果用npm管理：

npm install jquery.counterup waypoints

然后在resources/js/app.js中引入：

import 'jquery.counterup';
import 'waypoints/lib/jquery.waypoints.min.js';

执行npm run dev编译资源。

2. 确保初始化代码在插件加载后执行 #

所有自定义JS代码要放在$(document).ready()中，保证DOM和插件都加载完成后再执行。

二、修复Select2多选下拉框无响应问题 #

报错会阻断后续JS执行，先解决上面的报错，再按以下代码调整Select2的逻辑：

1. 控制器传递数据（Laravel端） #

确保控制器正确传递套餐数据到视图：

public function yourMethod()
{
    // 从数据库获取套餐名称和价格
    $packages = \App\Models\Package::select('package_name', 'price')->get();
    return view('your-view', compact('packages'));
}

2. HTML结构 #

<!-- 引入Select2样式 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<div class="form-group">
    <label>选择套餐</label>
    <select id="packageSelect" class="form-control" multiple>
        @foreach($packages as $package)
            <option value="{{ $package->price }}">{{ $package->package_name }}</option>
        @endforeach
    </select>
</div>

<div class="form-group">
    <label>选中套餐名称</label>
    <input type="text" id="packageNames" class="form-control" readonly>
</div>

<div class="form-group">
    <label>总价</label>
    <input type="text" id="totalPrice" class="form-control" readonly value="0">
</div>

<!-- 引入Select2脚本 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

3. 自定义JS逻辑 #

<script>
$(document).ready(function() {
    // 初始化Select2多选组件
    $('#packageSelect').select2({
        placeholder: "请选择套餐",
        allowClear: true
    });

    // 监听下拉框选择变化
    $('#packageSelect').on('change', function() {
        let selectedOptions = $(this).find('option:selected');
        let total = 0;
        let nameList = [];

        // 遍历选中选项计算总价、收集名称
        selectedOptions.each(function() {
            total += parseFloat($(this).val());
            nameList.push($(this).text());
        });

        // 更新套餐名称文本框
        $('#packageNames').val(nameList.join(', '));

        // 更新总价并触发counterUp数字动画
        $('#totalPrice').val(total).counterUp({
            delay: 10,
            time: 1000
        });
    });

    // 页面加载时初始化总价的counterUp
    $('#totalPrice').counterUp({
        delay: 10,
        time: 1000
    });
});
</script>

三、关键注意事项 #

1. 确保jQuery只加载一次：Laravel默认的app.js可能已包含jQuery，避免重复引入导致冲突。
2. 检查浏览器控制台是否还有其他报错：如果还有其他JS错误，需优先修复，否则Select2事件无法正常执行。
3. 测试多选功能：选择多个套餐后，确认名称文本框会用逗号分隔显示，总价会自动求和并触发数字动画。

内容的提问来源于stack exchange，提问作者Joy Egbala