根据选择输入更改输入值答案

【问题标题】：Change input value based on select input根据选择输入更改输入值
【发布时间】：2014-05-28 11:19:15
【问题描述】：

以下脚本应该这样做：

当在输入中输入一个值时，结果（在另一个 div 中）应该乘以一个数字。 This number changes, when other select option is chosen.

代码

$('#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/

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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.

【讨论】：

【解决方案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());
    }

});

【讨论】：

【解决方案3】：

为此在事件中使用

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

Jsfiddle

【讨论】：

【解决方案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

【讨论】：

【解决方案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

【讨论】：