如何在JavaScript中关联两个输入？

Question

我有以下代码：

 $(document).ready(function(){ $('.container select').each(function(){ $(this).on('change', function(){ var selectedVal = $(this).val(); //console.log(selectedVal); }); }); $('input').on('change', function () { var sum = 0; $('input').each(function() { sum += Number($(this).val()); }); $('.total span').html(sum); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <div class='full'> <input type='number' value=''> <select name='select1'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select2'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select3'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='total'> Total nr: <span>5(2 A1, 3 A2)</span> </div> </div> 

是否有可能像上面的代码中使用JavaScript / jQuery那样，在选择和类型数字的输入发生更改的情况下修改总数？ 谁能帮我这个忙。

在输入或选择字段的每次更改时，我都需要计算A1的总数和A2的总数。 希望这有意义。 并在总数旁边显示它们。

JSFiddle

Answer 1

我们无法提供完整的代码，但我尝试为您提供所需的逻辑。我想您需要这样的东西：

 //create a json to collect the sum of numbers var number = { a1: 0, a2: 0, a1_count:0, a2_count:0 }; //check in select change $(".select").change(function() { //flush previous calculation before using again number.a1=0,number.a2=0,number.a1_count=0,number.a2_count=0; //check all the select value and get the corresponding input value $(".select").each(function() { var valueType = $(this).val(); if (valueType == "a1") { number[valueType+"_count"]=number[valueType+"_count"]+1; number[valueType] = number[valueType] + parseInt($(this).prev().val()||0); } else if (valueType == "a2") { number[valueType+"_count"]=number[valueType+"_count"]+1; number[valueType] = number[valueType] + parseInt($(this).prev().val()||0); } }); $("#total").html('Total:'+(number.a1+number.a2)+',A1:'+number.a1+'('+number.a1_count+'),A2:'+number.a1+'('+number.a2_count+')'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <div class='full'> <input type='number' value=''> <select name='select1' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select2' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select3' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='total' id="total"> </div> </div> 

Answer 2

这将适用于select中的任意列表。

function change() {
  var res = {}, fulls = $('.container .full');
  fulls.each(function(index){
    var selected = $(this).find('select > option:selected').text();
    if (! res[selected]) res[selected] = 0;
    res[selected] += 1*$(this).find('input[type="number"]').val();
  });
  var detail = "", total = 0;
  for(prop in res) {
    if (res.hasOwnProperty(prop)) {
      try {
        var val = 1*res[prop];
        detail += ", "+val+" "+prop;
        total += val;
      }catch(e){}
    }
  }
  $('.total > span').text(""+total+" ("+detail.substr(2)+")");
}

$().add('.container .full input[type="number"]')
   .add('.container .full select[name^="select"]')
   .on('change', change);