クライアントの予約システムを構築するために使用している単純な 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 とカウントしたくありません。部屋をカウントしてから他のドロップダウンをカウントする必要があります。