0

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

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。我确实需要它来计算房间，然后是其他下拉列表

4

1 回答 1

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);
})

演示：小提琴

于 2013-09-06T03:55:02.143 回答