如何保持 Bootstrap Multiselect 选定项目的总价值？

Question

我有一个多选下拉列表和一个文本框。用户可以从列表中选择或取消选择任何元素。我想从列表中添加所有选定的项目并在文本框中显示总值，当从列表中取消选择项目时，应从列表中减去该值。但是，当用户取消选择某个项目时，我不知道如何从totalPrice 中减去该值。

<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">

目前我可以添加所有值并将其显示在文本框中。但是，当我选择了两项并取消选择一项时，totalPrice 的值仍然会上升。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<script>
    $(document).ready(function () {
        var totalPrice = 0;
        $('#DDLSkills').change(function () {

            var value = $(this).val();

            if ($(this).val() == null) {
                totalPrice = 0;
                document.getElementById('txtPrice').value = 0;
            }

            if (value != null)
            {
                for (var i = 0; i < value.length; i++) {
                    if (jQuery.inArray(value[i], value) != -1) {
                        totalPrice += parseInt(value[i]);
                        document.getElementById('txtPrice').value = totalPrice;
                    }
                }
            }
        });
    })
</script>

谢谢

Answer 1

其实我认为应该这样处理问题：

与其尝试从totalValue 中减去取消选择的项目的值，我们可以改为跟踪所有选定项目的totalValue。

代码中的解决方案：

$(document).ready(function () {  
  $('#DDLSkills').change(function () {
    var value = $(this).val();
    
    // We're initializing totalPrice here to keep a running sum
    var totalPrice = 0; 
    
    if ($(this).val() == null) {
      document.getElementById('txtPrice').value = 0;
    }

    if (value != null) {
      
      // We sum up all the values of items currently selected
      for (var i = 0; i < value.length; i++) {
        if (jQuery.inArray(value[i], value) != -1) {
          totalPrice += parseInt(value[i]);
        }
      }
      
      // And print this sum to the screen on-the-fly!
      document.getElementById('txtPrice').value = totalPrice;
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css" rel="stylesheet"/>


<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>

---

说明

在原始代码中总价值仍然持续上升的原因，是您有一个附加到 #DDLSkills 的 on “change” 事件处理程序。因此，每次您选择一个项目时，它都会在“更改”事件上触发此事件并运行回调函数，该函数只会不断添加到 totalValue。

在这个答案的解决方案中，请注意我将 totalValue 初始化语句放入 on“change”函数中。这样，每次用户选择/取消选择一个项目时，仅将显示所选项目列表的运行总值。