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

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