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”函数中。这样，每次用户选择/取消选择项目时，仅将显示所选项目列表的运行总值。

如何保持Bootstrap的运行总数多选所选项目的值？

1 个答案: