Question

民间，

无论何时更改其中任何一个，我都会尝试将2个选择下拉列表的值复用，然后再显示该值。

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

TIA！

编辑编辑编辑编辑编辑

感谢大家的帮助 - 我已经更新了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确定它是否应根据导致事件的元素调用处理程序）。选择元素的更改事件不会冒出来。

点击事件会冒泡，但是当值发生变化时，它不会被提升。

你需要以不同的方式解决这个问题。一种选择是直接绑定元素的更改事件（而不是使用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);
    });
});

JQuery Multiplication 2选择

4 个答案: