如何在JavaScript中关联两个输入

How to associate two inputs in JavaScript?

本文关键字：两个 输入 关联 JavaScript      更新时间：2023-11-08

我有这个代码：

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

我们不能给你完整的代码，但我试图为你想要的提供一些逻辑。我想你想要这样的东西：

//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>

这将适用于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);
相关文章：