Question

以下脚本应该：

在输入中输入值时，结果（在另一个div中）应乘以数字。当选择其他select option时，此数字会发生变化。

代码

$('#dePlooi').change(function(){
 if ($("#dePlooi").val() == "2") {
   $("#txt_name").on("keyup change", function() {
   var value = this.value;
   var valuemath = value * 2.5;  
    $("#dom_element").text(valuemath);   
});
 } 
 else if ($("#dePlooi").val() == "3") {
   $("#txt_name").on("keyup change", function() {
   var value = this.value;
   var valuemath = value * 3;  
   $("#dom_element").text(valuemath);    
   });
 } else if ($("#dePlooi").val() == "1") {
     $("#txt_name").on("keyup change", function() {
   var value = this.value;
   var valuemath = value * 2;  
   $("#dom_element").text(valuemath);    
   });
 }
});

这有点工作，但只有选择了一个选项然后输入才会改变。我希望它以这种方式发生，但也需要更改选择选项更改的输入。例如：

如何更改输入或选择选项时，事件会触发？

小提琴： http://jsfiddle.net/eJvMb/

Answer 1

简单地绑定两个事件要容易得多，一个用于选择更改，另一个用于on keyup。

var multiplier = 1;

// bind keyup
 $("#txt_name").on("keyup change", function() {
   var value = this.value;
   var valuemath = value * multiplier;  
    $("#dom_element").text(valuemath);   
});

$('#dePlooi').change(function(){
    multiplier = $(this).val();
    $("#txt_name").trigger("keyup");
});

Take a look at this JSFiddle.

Answer 2

试试这个

jQuery(document).ready(function ($) {
    var ploVal=0;
    var textVal=0;

    $('#dePlooi').change(function(){
     ploVal=this.value;
        calculate();
        //$("#dom_element").text(tot);
    });
     $("#txt_name").on("keyup change", function() {

         var textVal=this.value;

          calculate();
    });

    function calculate()
    {
        ploVal=$("#dePlooi").val();
    textVal=  $("#txt_name").val();  
          var tot=ploVal * textVal;
        $("#dom_element").text(tot);
        //alert($("#dePlooi").val());
    }

});

Answer 3

在此事件中使用

 $(document).on("change","#dePlooi,#txt_name",function(){
    var value = $("#txt_name").val(),
    valuemath = value *  $("#dePlooi").val();  
    $("#dom_element").text(valuemath); 
 });

Jsfiddle

Answer 4

为什么不试试这个简单的代码：

<input type="text" id="txt_name"  class="testclass" />

<select id="dePlooi" name="dePlooi" class="testclass">
    <option value="0">Choose</option>
     <option value="1">x2</option>
     <option value="2">x2.5</option>
    <option value="3">x3</option>
</select>

<div id="dom_element">-</div>

脚本：

$('.testclass').change(function(){
    if($('#dePlooi').val()=="0" ||$.trim($('#txt_name').val())==""){
        $('#dom_element').html("");
    }else{
        var valueToFill=parseInt($('#dePlooi').val())*parseInt($.trim($('#txt_name').val()));
        $('#dom_element').html(valueToFill);    
    }
});

JSFiddle

Answer 5

每次更改下拉选项时都无需绑定keyup事件。

您可以实现目标，只需单独绑定keyup和change。

试试这个：

// Bind "keyup" event on textbox
    $("#txt_name").on("keyup change", function() {      
       var value = this.value;
        var valuemath = 0;
        if($('#dePlooi').val() > 0){    
          value = value * parseFloat($("#dePlooi option:selected").text().replace("x",""));  
        }
        $("#dom_element").text(valuemath);   
    });

// Bind "change" event on textbox
    $('#dePlooi').change(function(){   
        if($("#txt_name").val().trim() != ""){
            var value = $("#txt_name").val().trim();
            var valuemath = 0;
            if($(this).val() > 0){ 
              value = value * parseFloat($("#dePlooi option:selected").text().replace("x",""));  
            }
            $("#dom_element").text(valuemath);
        }
    });

Working Example

根据选择输入更改输入值

代码

5 个答案: