1

私が作成したいのは、次のテーブルです。

  1. 国の選択 [選択すると、出荷フィールドに説明が生成され、価格フィールドにそれぞれの価格が生成されます]
  2. 固定商品名と固定価格 [簡単:-)]
  3. アクセサリの選択 [price-field でそれぞれの価格を生成]
  4. 3 つの価格を合計した総発生量
  5. form method="post" で合計金額を送信

画像の例
これは、jQuery の実装が必要なコードのアイデアです。

<form action="product.php" method="post">
<h2>Select Country shipment</h2>
<select>
<option>USA $1.00</option>
<option>CANADA $2.00</option>
<option>EUROPE $3.00</option>
</select>
<br />
<br />
<table border="1" cellpadding="5">
<tr>
<td width="200"></td>
<td width="60"><strong>Price</strong></td>
</tr>
<tr>
<td>Product</td>
<td>10.00</td>
</tr>
<tr>
<td><span id="shipment_text"></span></td>
<td><span id="shipment_price"></span></td>
</tr>
<tr>
<td>
<select>
    <option value=""></option>
    <option value="Accessory1">Accessory 1 - $1.00</option>
    <option value="Accessory2">Accessory 2 - $2.00</option>
    <option value="Accessory3">Accessory 3 - $3.00</option>
</select></td>
<td><span id="accessory_price"></span></td>
</tr>
<tr>
<td align="right"><strong>Total</strong></td>
<td><span id="total"></span></td>
</tr>
</table>
<br />
<input type="hidden" id="total" name="amount" value="" />
<input type="submit" value="Submit">
</form>

助けてくれてありがとう！

4

2 に答える 2

1

国の選択が変更されたときに何かを行うには、これを使用します。

$("#country").change(function() {
    /*update description and shipping price/*
});

id="country"国選択に追加する必要があることに注意してください。その後、他の選択でも同様のことができます。

または、同じイベントをすべての選択にアタッチし、イベント ハンドラーで選択したすべてのオプションを取得して、すべてが同じ場所で発生するようにすることもできます。

$("select").change(function() {
    var country = $("#country option:selected").val();
    var accessory = $("#accessories option:selected").val();
    /* Update all selects, prices, and total accordingly */
});

valueすべてのオプションに識別子として属性を付ける必要があることに注意してください。これらは、生の数値としての価格になる可能性があります。window.parseFloat ()を使用して、属性文字列から数値に変換します。

ここで重要な概念は.change()と:selectedです。

フォームの送信に関しては、送信ボタンでうまくいくはずです。リクエストとパラメーターを手動で制御したい場合は、$.post()を使用できます。その例は、そのドキュメント ページにあります。

お役に立てれば！

于 2012-07-06T00:02:01.320 に答える
1

ワーキングデモ http://jsfiddle.net/aRDXD/1/ または http://jsfiddle.net/tyAmg/

これが私の投稿を削除するのに役立たないかどうかを教えてください。

:)また、あなたの金額は にある$が、合計はeuro:Pにあることに注意してください

コード

$('select').on('change', function(){
    var sum = 0;
    $('.sum').each(function(){

       sum += parseInt($(this).attr("value").replace('$',''));
    });

    $('#total').html(sum);
});

HTML

<form action="product.php" method="post">
<h2>Select Country shipment</h2>
<select class="sum">
<option value="$1.00">USA $1.00</option>
<option value="$2.00">CANADA $2.00</option>
<option value="$3.00">EUROPE $3.00</option>
</select>
<br />
<br />
<table border="1" cellpadding="5">
<tr>
<td width="200"></td>
<td width="60"><strong>Price</strong></td>
</tr>
<tr>
<td>Product</td>
<td class="sum" value="10.00">10.00</td>
</tr>
<tr>
<td><span id="shipment_text"></span></td>
<td><span id="shipment_price"></span></td>
</tr>
<tr>
<td>
<select class="sum">
    <option value=""></option>
    <option value="1.00">Accessory 1 - $1.00</option>
    <option value="2.00">Accessory 2 - $2.00</option>
    <option value="3.00">Accessory 3 - $3.00</option>
</select></td>
<td><span id="accessory_price"></span></td>
</tr>
<tr>
<td align="right"><strong>Total</strong></td>
<td><span id="total"></span></td>
</tr>
</table>
<br />
<input type="hidden" id="total" name="amount" value="" />
<input type="submit" value="Submit">
</form>
于 2012-07-06T00:10:51.983 に答える