尝试从 select2 选择选项检索数据时，未捕获类型错误：jQuery(...).counterUp 不是函数错误

Question

我有一个select2多个框，其中包含从我的Laravel控制器压缩的“package_name”数据和“price”值，以及2个用于总价和ordered_pacakage的文本框，我想显示所选任何选项的价格（如果其超过1）选择了选项，那么我需要选择的所有选项的总和，并且我还想显示在ordered_pacake tectbox中选择的所有选项的package_name，如果它超过1，则应该用逗号分隔。

我有这个代码

<div class="col-lg-12">
    <label for="packages"> Packages </label>
    <select class="js-example-basic-multiple form-select" name="packages[]" multiple="multiple" id="packagesSelect">
                                        
        @foreach ($products as $product)
            <option value="{{ $product->package_price }}">{{ $product->package_name }}</option>
        @endforeach
    </select>
                                                                                     </div>
                
<div class="col-lg-6">
    <input type="text" id="totalPrice" name="totalPrice" placeholder="0" readonly>
</div>
<div class="col-lg-12">
    <input type="text" id="ordered_package" name="ordered_package" placeholder="0" readonly>
</div>

和相应的javascript

<script>
    const packagesSelect = document.getElementById("packagesSelect");
    const totalPriceInput = document.getElementById("totalPrice");
    const orderedPackageInput = document.getElementById("ordered_package");

    packagesSelect.addEventListener("change", function () {
        const selectedOptions = Array.from(packagesSelect.selectedOptions);
        const totalPackagePrice = selectedOptions.reduce((sum, option) => sum + parseFloat(option.value), 0);
        totalPriceInput.value = totalPackagePrice.toFixed(2);

        const selectedPackageNames = selectedOptions.map(option => option.text);
        orderedPackageInput.value = selectedPackageNames.join(", ");
    });
</script>

我得到：

“未捕获的类型错误：jQuery(...).counterUp 不是函数”

在我的控制台中加载页面，如果我选择任何选项，则什么也不会发生

Answer 1

使用 jQuery CountUp 插件

使用方法：

$('.counter').counterUp();
or with extra parameters:
$('.counter').counterUp({
    delay: 10,
    time: 1000
});