Calculation Plugin - Using with SELECT fields

Calculation Plugin - Using with SELECT fields

    I want to create a form based on the Calculation plugin, using the price * quantity example found here: 

    http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm 

    But I want to use SELECT fields (drop down lists) rather than text input fields.  I've tried passing the variable to the recalc function with onChange and determining the variable inside the function with:




var quantity = document.getElementById('select').selectedIndex;

but I can't seem to get it to work.

Obviously with the select fields I would need to 'bind' with something other than keyup, or find another solution...



 I'm posting the original code with the text input fields - I have this working on a test page.

I'm a Javascript novice if that is not already apparent.

Thanks



  1.     <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.calculation.js"></script>

         


        <script type="text/javascript">
       
       
             $(document).ready(function(){

         
             // bind the recalc function to the quantity fields
                $("input[name^=qty_item_]").bind("keyup", recalc);
                // run the calculation function now
                recalc();


            function recalc(){
           
           
            $("[id^=total_item]").calc(
                // the equation to use for the calculation
                "qty * price",
                // define the variables used in the equation, these can be a jQuery object
                {
                    qty: $("input[name^=qty_item_]"),
                    price: $("[id^=price_item_]")
                },
                // define the formatting callback, the results of the calculation are passed to this function
                function (s){
                    // return the number as a dollar amount
                    return "$" + s.toFixed(2);
                },
                // define the finish callback, this runs after the calculation has been complete
                function ($this){
                    // sum the total of the $("[id^=total_item]") selector
                    var sum = $this.sum();
                   
                    $("#grandTotal").text(
                        // round the results to 2 digits
                        "$" + sum.toFixed(2)
                    );
                }
            );
        }

       

         });

         
        </script>
      </head>

      <body>
      
       <form name="form">
       <table width="500">
                    <col style="width: 50px;" />
                    <col />
                    <col style="width: 60px;" />
                    <col style="width: 110px;" />

                    <tr>
                        <th>
                            Qty
                        </th>
                        <th align="left">
                            Product
                        </th>
                        <th>
                            Price
                        </th>

                        <th>
                            Total
                        </th>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="text" name="qty_item_1" id="qty_item_1" value="1" size="2" />
                           
                        </td>
                        <td>

                            <a href="http://www.packtpub.com/jQuery/book">Learning jQuery</a>
                        </td>
                        <td align="center" id="price_item_1">
                            $39.99
                        </td>
                        <td align="center" id="total_item_1">
                            $39.99
                        </td>
                    </tr>

                    <tr>
                        <td align="center">
                            <input type="text" name="qty_item_2" id="qty_item_2" value="1" size="2" />
                        </td>
                        <td>
                            <a href="http://jquery.com/">jQuery Donation</a>
                        </td>
                        <td align="center" id="price_item_2">

                            $14.99
                        </td>
                        <td align="center" id="total_item_2">
                            $14.99
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="right">
                            <strong>Grand Total:</strong>

                        </td>
                        <td align="center" id="grandTotal">
                        </td>
                    </tr>
                </table>