基本上我遇到的问题是第二个下拉列表(bagel_form)继承了第一个下拉列表中的任何值,并根据该值计算总数。
我想要发生的是根据它当前的下拉列表将其值添加到总计中。如果选中该框,则添加到总计中,如果未选中该框,则从总计中减去。(基于下拉修饰符)。
我做了一个小提琴来说明这个问题,因为它有点令人困惑。
HTML
<table id="hor-minimalist-b" summary="Breakfast Sponsor">
<th>Pizza</th> <th>Bagel</th>
<tr>
<td><input type="checkbox" name="pizza_form" id="1" value="500">
<select id="my_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></td>
<td><input type="checkbox" name="bagel_form" id="1" value="200">
<select id="my_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></td>
</tr>
</table>
<div id="total_price">Total:</div>
<input class="total" readonly="readonly">
jQuery
var total = 0;
$('input[name=pizza_form], input[name=bagel_form] ').live('click', function() {
var current_price = parseInt($(this).attr('value'));
if($(this).hasClass('checked'))
{
$(this).removeClass('checked');
total -= current_price ;
remove_dropdowns(total) ;
}
else
{
$(this).addClass('checked');
total += current_price ;
add_dropdowns(total) ;
}
function add_dropdowns(total) {
var quantity = parseInt($('#my_select').val());
var new_price = parseInt(quantity * total);
$("input[class='total']").val(new_price);
$('select#my_select').change(function() {
var quantity = parseInt($('#my_select').val());
var new_price = parseInt(quantity * total);
$("input[class='total']").val(new_price);
});
}
function remove_dropdowns(total) {
var quantity = parseInt($('#my_select').val());
var new_price = parseInt(quantity * total);
$("input[class='total']").val(new_price);
$('select#my_select').change(function() {
var quantity = parseInt($('#my_select').val());
var new_price = parseInt(quantity * total);
$("input[class='total']").val(new_price);
});
}
});
</p>