我有一个select2多个框,其中包含从我的laravel控制器压缩的“package_name”数据和“price”值,以及2个用于totalprice和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>
在加载页面时,我在控制台中收到“Uncaught TypeError: jQuery(...).counterUp is not a function”,如果我选择任何选项,则不会发生任何事情
使用 jQuery CountUp 插件。 https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js
使用方法: $('.counter').counterUp(); 或者使用额外的参数: $('.counter').counterUp({ 延迟:10, 时间:1000 });