Question

我有一个简单的jquery脚本，用于为客户端构建约会系统。数据价格代表所提供服务的实际价格。我需要能够将结果与其他下拉列表相结合，而不是只选择任何数据价格

的jQuery

$("select").change(function(){
   var price = parseFloat($(this).find("option:selected").data("price"));
   if(isNaN(price))
       price = 0;
   var currPrice = parseFloat($("strong").data("price"));
   $("strong").text('$ ' + currPrice + price );
})

相关HTML（使用Laravel 4刀片模板调用数据库表）

<div id="rm_clean" class="tab-pane fade in active">
       Areas:<br />
   <select name="rooms"> 
        <option value="" selected="selected">0</option>
         @foreach ($room as $rooms)
         <option data-price="{{ $rooms->pr_clean }}" value='{{ $rooms->room  }}'>{{ $rooms->room  }}</option>
         @endforeach
    </select>
</div>
<div id="rm_deodorize" class="tab-pane fade">
       Deodorizer:<br />
   <select name="pr_deodorizer"> 
        <option value=''>0</option>
         @foreach ($room as $rooms)
            <option data-price="{{ $rooms->pr_deodorizer }}" value='{{ $rooms->pr_deodorizer  }}'>{{ $rooms->room  }}</option>
         @endforeach
    </select>
</div>
<div id="rm_protectent" class="tab-pane fade">
        Protectant:<br />
    <select name="pr_protectant"> 
        <option value=''>0</option>
         @foreach ($room as $rooms)
            <option data-price="{{ $rooms->pr_protectant }}" value='{{ $rooms->pr_protectant  }}'>{{ $rooms->room  }}</option>
         @endforeach
    </select>
</div>
<div id="rm_sanitizer" class="tab-pane fade">
        Sanitizer:<br />
    <select name="pr_sanitizer"> 
        <option value=''>0</option>
         @foreach ($room as $rooms)
            <option  value='{{ $rooms->pr_sanitizer  }}'>{{ $rooms->room  }}</option>
         @endforeach
    </select>
</div>

<strong data-price="0">$</strong>

我希望能够将其他下拉列表与不同的下拉列表结合起来。如果我在下拉列表中选择1个房间，然后在同一个下拉列表中选择5个房间，我不希望它计数6.我确实需要它来计算房间，然后是其他下拉列表

Answer 1

一个简单的解决方法是迭代更改中的所有选择，否则您需要为每个选择保留先前选择的值，然后从currPrice中减去它然后添加当前值

var $selects = $("select").change(function () {
    var total = 0;
    $selects.each(function () {
        var price = parseFloat($(this).find("option:selected").data("price")) || 0;
        total += price;
    })
    $("strong").text('$ ' + total);
})

演示：Fiddle

从多个选择框中获取价格

1 个答案: