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

Question

我想创建一个包含以下内容的表：

1. 选择国家/地区 [选择后，它会在发货字段中生成描述，并在价格字段中生成相应的价格]
固定
2. 产品名称和固定价格 [简单：-）]
3. 配件的选择[在价格字段中生成相应的价格]
4. 产生的总金额与 3 个价格相加
5. 使用表单方法提交总金额="发布"

图像示例
这是需要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>