Как сохранить общее значение выбранного элемента Bootstrap Multi-select?

У меня есть раскрывающийся список с несколькими вариантами выбора и текстовое поле. Пользователь может выбрать или отменить выбор любого элемента из списка. Я хочу добавить все выбранные элементы из списка и показать общее значение в текстовом поле, и когда элемент отменен из списка, значение должно быть вычтено из списка. Однако я не знаю, как мне вычесть значение из 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>

Спасибо


jquery multi-select
person Mr Nobody    schedule 21.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле, я думаю, что вот как следует подходить к проблеме:

Вместо того, чтобы пытаться вычесть значение невыбранного элемента из 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". Таким образом, каждый раз, когда вы выбираете элемент, он вызывает это событие «change» и запускает функцию обратного вызова, которая просто продолжает добавлять к totalValue.

Обратите внимание, что в решении этого ответа я поместил оператор инициализации totalValue в функцию «изменить». Это делается для того, чтобы каждый раз, когда пользователь выбирает элемент или отменяет его выбор, будет отображаться только промежуточное итоговое значение списка выбранных элементов.

person NatKSS    schedule 21.01.2018
comment
Большое спасибо за то, что указали на правильное понимание этой проблемы. - person Mr Nobody; 21.01.2018