jQuery的 - 从选择生成价格，动态总结柱，后总量形式

Question

什么，我想创建一个与表：

1. 选择国家[时选择它产生在装运场的描述和相应价格的价格字段]
2. 固定产品名称和固定价格[容易:-)]
3. 选择附件的[它产生在价格字段各自的价格]产生总结了3
4. 总量价格
5. 提交总量与形式方法= “邮报”

Image example
这是需要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>