JQuery Multiplication of 2 selects

Question

Folks,

I'm trying to multiple the values of 2 select dropdowns whenever either of them are changed and then display that value.

This is what I have (which of course doesn't work) - Any ideas?

TIA!

EDIT EDIT EDIT EDIT EDIT EDIT

Thanks everyone for the help - I've updated the JQuery to reflect the attempts I've made based on all your posts. No luck yet, but I'm learning a lot :)

EDITED ONE LAST TIME WITH WORKING SOLUTION - Thanks all

$(document).ready(function() {  
 $(".DropChange").change(function(){  
  var ValOne = $('#ValOne').val();
  var ValTwo = $('#ValTwo').val();
  var totalTotal = ((ValOne * 1) * (ValTwo * 1));    
  $('#Total').text(totalTotal);
 }); 
}); 
<select name="ValOne" id="ValOne" class="DropChange">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
</select>

<select name="ValTwo" id="ValTwo" class="DropChange">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
</select>
<span id="Total"></span>

Answer 1

You won't be able to attach a change event handler via jQuery's live function.

jQuery's live function is implemented by taking advantage of event bubbling (a handler is attached to the document, when an event bubbles up, jQuery determines if it should call your handler based on which element caused the event). The select element's change event does not bubble up.

The click event does get bubbled up, but it's not raised when the value changes.

You'll need to approach this differently. One option is to bind directly to the elements' change events (as opposed to using live).

$(".DropChange").change(function(){

instead of

$(".DropChange").live("change", function(){

Another option is to calculate and display the product on a timer.

Answer 2

Don't use live, use change event instead.

Also, you are setting the result into an element #display, but I think you mean #Total.

EDIT Since you still haven't figured it out, here ya go...

$(function() {
  $(".DropChange").change(function(){
    var valone = $('#ValOne').val();
    var valtwo = $('#ValTwo').val();
    var total = ((valone * 1) * (valtwo * 1));
    $('#Total').text(total);
  });
});

Answer 3

<select name="ValOne" id="ValOne" class="DropChange">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<select name="ValTwo" id="ValTwo" class="DropChange">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
<span id="Total"></span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; 
<script type="text/javascript">
    $(document).ready
    (
     function()
     {
      $(".DropChange").change
      (
       function()
       {
        $("#Total").text($("#ValOne").val() * $("#ValTwo").val());
       }
      );
     }
    );     
</script>