jQuery - Генериране на цени от селекция, колона с динамична сума, формуляр за публикуване на обща сума

За да направите нещо, когато изборът на държава се промени, използвайте това:

$("#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(), и има пример за това на тази страница с документация.

Надявам се това да помогне!

Работеща демонстрация http://jsfiddle.net/aRDXD/1/ < strong>или 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>