0

たくさんのオプションがある製品注文ページを作成したいと考えています。各オプションは価格を少し変更します。オプションが変更されるたびに合計価格が自動更新されるようにします。

すべてのオプションはドロップダウン メニューであるため、ドロップダウンからオプションを選択すると価格を変更する必要があります。

私はすべてに対してオープンですが、1 ページの単純なコードが最適です。商品は 1 つしかないため、商品ページの残りの部分の一部として価格を編集できるようにしたいと考えています。

アドバイスをいただければ幸いです。

4

1 に答える 1

1

すべての価格入力フィールドの合計を計算し、そのonchangeようにドロップダウンのイベントに下部に出力するjQuery/javascript関数をバインドしてみてください。私が提供しているHTMLは単なるモックアップです。自由に変更して、jQueryが必要に応じて参照してください。

HTML：

<p>Computer base price: $<span id="baseCost"></span></p>

<p>Select your upgrades:</p>
<form id="options">
    <select name="processor" onchange="calculateTotals()">
        <option value="Base_0">Base processor ($0)</option>
        <option value="Processor1_100">Processor 1 ($100)</option>
        <option value="Processor2_500">Processor 2 ($500)</option>
    </select>
    <select name="hard-drive" onchange="calculateTotals()">
        <option value="Base_0">Base hard-drive ($0)</option>
        <option value="7200rpm_250">7200rpm hard-drive ($250)</option>
    </select>
</form>

<p>Upgrade total: $<span id="upgradeCost">0</span></p><br>
<p>Final total: $<span id="sumTotal"></span></p>​

Javascript：

$(document).ready(function(){
    var basePrice = 2000;
    $("#baseCost").text(basePrice);
    $("#sumTotal").text(basePrice);
});

function calculateTotals(){
    var basePrice = parseInt($("#baseCost").text(), 10);
    var upgradePrice = 0;
    $("#options select").each(function(){
        var optionVal = $(this).val();
        upgradePrice += parseInt(optionVal.substr(optionVal.indexOf("_") + 1, optionVal.length - 1), 10);
    });
    $("#upgradeCost").text(upgradePrice);
    $("#sumTotal").text(basePrice + upgradePrice);
}​

ワーキングデモ

ご覧のとおり、オプションvalue属性には、オプションIDとその価格の両方がアンダースコアで区切られて含まれています。これにより、Javascriptとフォーム処理コードで、選択したオプションとその価格の両方を取得できます。

于 2012-08-15T04:02:54.260 に答える