Блог

Используя bootstrap-select — я умножаю значения двух полей выбора в форме и изменяю значение поля ввода для отображения общего числа — после загрузки страницы.

Как я могу сделать так, чтобы поле ввода оставалось пустым, если выбрано только одно из полей выбора или ни одно из них?

Приведенный ниже код работает, только если выбраны оба поля.

1. Когда ни одно из полей не выбрано, вычисляется с первыми значениями обоих полей — результат становится 10 долларов.

2. Когда выбрано одно из полей, оно умножает выбранное значение на первое значение невыбранного поля — результат становится 1 * выбранное значение, или выбранное значение * 10 долларов.

PS. Причина, по которой я использую .загрузка, а не .изменение заключается в том, что поля сохраняются с garlic.js

 <select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option>$10</option>
<option>$20</option>
<option>$30</option>
</select>

<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<input type="text" class="form-control" name="total" id="total" readonly="true" />

$(window).on("load", function(){
var price = parseInt($('.price').val());
var multiply = parseInt($('.multiply').val());
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$'   total);
}
});
  

Проблема заключалась в том, что атрибут ‘title‘ в ‘bootstrap-select‘ не использует значение ‘0‘ по умолчанию. поле параметра. Таким образом, приведенный выше код принимает значение из первого выбираемого параметра при загрузке формы.

Чтобы обойти эту проблему:

1. Добавлен первый параметр по умолчанию с нулевым значением в теге select.
2. Использовал встроенный ‘show.bs.select‘ для запуска события при отображении выпадающего списка и встроенный метод ‘refresh‘ для его удаления.

Дополнительный код:

 $('.selectpicker').on('show.bs.select', function () {
$('.selectpicker').find('[value=0]').remove();
$('.selectpicker').selectpicker('refresh');
});

<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="0"></option>
<option value="10">$10</option>
<option value="20">$20</option>
</select>

<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
  

Я надеюсь, что это поможет вам

  <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script src="http://garlicjs.org/garlic.js"
        type="text/javascript"></script>
<form data-persist="garlic" method="POST">
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="10">$10</option>
<option value="20">$20</option>
<option value="30">$30</option>
</select>

<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<input type="text" class="form-control" name="total" id="total" readonly="true" />

</form>
  

На стороне скрипта

  <script>
    $(window).on("load", function(){
    calculate();

    $('.selectpicker').on('change',function(){
    calculate();

    })


    });
    function calculate()
    {
   var price = $('.price').val()?parseInt($('.price').val()):10;
var multiply =$('.multiply').val()? parseInt($('.multiply').val()):1;
    var total = price * multiply;
    if(total === ''){
    $('#total').val('');
    } else {
    $('#total').val('$'   total);
    }
    }
    </script>