jquery - jQuery - 从选择中生成价格，动态求和列，发布总金额表格

Question

我想创建的是一个表：

1. selection of country [when selected it generates the description in shipment-field and the respective price in the price-field]
2. 固定产品名称和固定价格 [简单:-)]
3. 配件的选择[它在价格字段中生成相应的价格]
4. 产生的总金额合计 3 个价格
5. 用表单方法=“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>

谢谢您的帮助！

Answer 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()，该文档页面上有一个示例。

希望这可以帮助！

Answer 2

工作演示 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>