JavaScriptで2つの入力を関連付けるにはどうすればよいですか？

Question

私はこのコードを持っている：

$(document).ready(function(){ 
 
    $('.container select').each(function(){ 
 
    \t \t $(this).on('change', function(){ 
 
     \t \t var selectedVal = $(this).val(); 
 
      //console.log(selectedVal); 
 
     }); 
 
    }); 
 
$('input').on('change', function() { 
 
    var sum = 0; 
 
    $('input').each(function() { 
 
     sum += Number($(this).val()); 
 
    }); 
 
\t $('.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

私たちはあなたの完全なコードを与えることはできませんが、私はあなたがこのようないくつかのことをしたいと思いますwant.I何のためにいくつかのロジックを提供しようとした：

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