Question

Basically the problem I’m having is that the second drop-down(bagel_form) is inheriting whatever the value is in the first drop-down and computing the total based on that.

What I want to happen is to add it’s value to the total based on what IT’S current drop-down is.If the box is checked add to total, if the box is unchecked subtract from total. (based on the drop-down modifier).

I made a fiddle to illustrate the problem, as it’s somewhat confusing.

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); 

    });
        }
 });

​
​

Answer 1

You’re repeating ids (myselect). If you repeat ids and attempt to select by id, it will just pick the first one.

Here’s working code:

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

I changed myselect to a class and passed a reference to the current checkbox. From there you can find the next closest .myselect and use that value.