1

基本上我遇到的问题是第二个下拉列表(bagel_form)继承了第一个下拉列表中的任何值,并根据该值计算总数。

我想要发生的是根据它当前的下拉列表将其值添加到总计中。如果选中该框,则添加到总计中,如果未选中该框,则从总计中减去。(基于下拉修饰符)。

我做了一个小提琴来说明这个问题,因为它有点令人困惑。

http://jsfiddle.net/Gqzhq/5/


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>

4

1 回答 1

3

你在重复 ids ( myselect)。如果您重复 id 并尝试按 id 选择,它只会选择第一个。

这是工作代码:

http://jsfiddle.net/Gqzhq/10/

我更改myselect为一个类并传递了对当前复选框的引用。从那里您可以找到下一个最接近.myselect的值并使用该值。

于 2012-11-20T17:47:25.300 回答