在.load上计算两个持久化的引导选择值

Question

使用引导-选择 --我将表单中两个select字段的值乘以，并更改输入字段的值以显示页面加载后的总数。

，当只选择一个或两个选择字段时，如何使输入字段保持为空？

下面的代码只在两个字段都被选中时才能工作。

1. 当两个字段都没有被选中时，它使用两个字段的第一个值进行计算--输出值为$10。
2. 当其中一个字段被选中时，它会将所选值与非选定字段的第一个值相乘--输出变为1*选定值，或选定值*10美元。

PS。我使用.load而不是.change的原因是字段被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);
}
});

Answer 1

问题是'bootstrap-select'，的'title‘属性不使用'’值默认选项字段。因此，在加载表单时，上面的代码从第一个可选择选项中获取值。

为了解决这个问题：

1. 在select标记中添加了带有零值的第一个默认选项。
2. 当显示下拉列表时，使用内置的'show.bs.select‘触发事件，并使用内置的'刷新’方法删除它。

补充代码：

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

Answer 2

我希望这能帮到你

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