如何实现Bootstrap Multi-select选中项值的动态累计计算

我明白你的问题啦——现在你的代码每次选中选项都会累加，但取消的时候不会正确减去对应值，这是因为你一直在旧的总和基础上做累加，没法精准追踪取消的是哪个选项。其实最简单的办法是每次选项变化时，重新计算所有当前选中项的总和，而不是在旧总和上做加减，这样不管是选中还是取消，结果都会准确。

下面是修改后的完整代码：

<input id="txtPrice" type="text" value="" class="form-control" />
<select id="DDLSkills" multiple name="selValue" class="selectpicker form-control" data-max-options="2">
  <option value="10">Ten</option>
  <option value="2">Two</option>
  <option value="4">Four</option>
</select>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<script>
$(document).ready(function () {
  $('#DDLSkills').change(function () {
    // 每次变化都重新初始化总和
    let totalPrice = 0;
    const selectedValues = $(this).val();
    
    if (selectedValues !== null) {
      // 遍历所有当前选中的值，累加计算总和
      selectedValues.forEach(val => {
        totalPrice += parseInt(val);
      });
    }
    // 把结果赋值给文本框，没有选中项时就是0
    $('#txtPrice').val(totalPrice);
  });
})
</script>

改动说明： #

• 移除了全局的totalPrice变量，改为每次触发change事件时重新初始化，避免旧值干扰
• 直接获取当前所有选中的selectedValues，遍历累加得到准确总和，不管是新增还是取消选项，都会重新计算
• 简化了逻辑，不需要判断某个值是否在选中列表里（因为selectedValues本身就是当前选中的集合）
• 没有选中项时，totalPrice保持0，直接赋值给文本框，逻辑更清晰

内容的提问来源于stack exchange，提问作者Mr Nobody