如何保持运行总计 Bootstrap 多 select selected 项目的价值？

Question

我有一个多select下拉列表和一个文本框。用户可以 select 或 deselect 列表中的任何元素。我想从列表中添加所有 selected 项目并在文本框中显示总值，当一个项目从列表中删除 selected 时，应该从列表中减去该值。但是，当用户 deselect 一个项目时，我不知道如何从 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">

目前我可以添加所有值并将其显示在文本框中。但是当我有两个项目 selected 并且当我 deselect 一个项目时 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 中减去已定义的 select 项目的价值，不如保留 totalValue 的运行ning 跟踪所有 selected 项目。

代码中的解决方法：

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

说明

在原始代码中总值仍然保持上升的原因是您有一个 on "change" 事件处理程序附加到 #DDLSkills。所以每次你 select 一个项目时，它都会在 "change" 事件和运行回调函数上触发它，它只是不断添加到 totalValue.

在这个答案的解决方案中，请注意我将 totalValue 初始化语句放入 on "change" 函数中。这样一来，每当用户 selects/deselects 一个项目时， 只会显示 项目列表 selected 的运行ning 总值.

如何保持运行总计 Bootstrap 多 select selected 项目的价值？

How to keep a running total of Bootstrap Multi-select selected item's value?

jquery

multi-select

如何保持 运行 总计 Bootstrap 多 select selected 项目的价值？

How to keep a running total of Bootstrap Multi-select selected item's value?

jquery

multi-select

如何保持运行总计 Bootstrap 多 select selected 项目的价值？