JQuery 2 个选择的乘法

Question

伙计们，

每当两个选择下拉列表中的任何一个发生更改时，我都会尝试将其值倍增，然后显示该值。

这就是我所拥有的（当然这不起作用）-有什么想法吗？

蒂亚！

编辑编辑编辑编辑编辑编辑编辑编辑

感谢大家的帮助 - 我已经更新了 JQuery 以反映我根据您的所有帖子所做的尝试。还不走运，但我学到了很多东西:)

最后一次使用可行的解决方案进行编辑 - 谢谢大家

$(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

不要使用 live，而是使用 change 事件。

另外，您将结果设置到元素 #display 中，但我认为您的意思是 #Total。

编辑既然你还没有弄清楚，那就开始吧...

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

Answer 2

您将无法通过 jQuery 的 live 函数附加更改事件处理程序。

jQuery 的 live 功能是通过利用事件冒泡来实现的（一个处理程序附加到文档中，当事件冒泡时，jQuery 会根据引起事件的元素来确定是否应该调用您的处理程序）。 select 元素的更改事件不会冒泡。

点击事件确实会冒泡，但当值更改时不会引发。

您需要以不同的方式处理这个问题。一种选择是直接绑定到元素的更改事件（而不是使用live）。

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

另

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

一种选择是在计时器上计算并显示乘积。

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"></script> 
<script type="text/javascript">
    $(document).ready
    (
        function()
        {
            $(".DropChange").change
            (
                function()
                {
                    $("#Total").text($("#ValOne").val() * $("#ValTwo").val());
                }
            );
        }
    );     
</script>

Answer 4

$(document).ready(function(){
    $('.DropChange').change(function(e){
        var total = 0;
        $('.DropChange').each(function(){
            var n = +$(this).val();
            if(total){
                total *= n;
            } else{
                total = n;
            }
        });
        $('#Total').text(total);
    });
});