選択時に余分な数を追加

Question

私は簡単な予約フォームを持っています。メイン入力タイプのテキストです。私はそれに各選択ボックスの最終結果を示しています。私の問題は2部屋を選んだときです。大人の数は2に変更されますが、私は大人2人を決して選ぶことはありませんが、入力タイプのテキストでこの値を変更することはできません。部屋数の値を2に変更すると、大人の変更の価値もわかります。それは正しくありません。サンプルがそれに含まれていなかったとして、私はわからないうまくいけば、これはあなたにそれ方法についていくつかのアイデアを与える、このchildAge何

$(document).ready(function(e) { 
 
    
 
    $('body').on('change', 'select', function(){ 
 
\t 
 
var rcount = $('select[name*=roomCount]').toArray().reduce(function(prev, current){ 
 
    prev += parseInt($(current).val()); 
 
    return prev; 
 
},0); 
 

 
var acount = $('select[name*=adultcount]').toArray().reduce(function(prev, current){ 
 
    prev += parseInt($(current).val()); 
 
    return prev; 
 
},0); 
 

 
var ccount = $('.childcount').toArray().reduce(function(prev, current){ 
 
    prev += parseInt($(current).val()); 
 
    return prev; 
 
},0); 
 

 
$('#allcount').val('room:'+rcount+'adult:'+acount+' child:'+ccount); 
 
}); 
 
    $("#roomCount").change(function() { 
 
    // 
 
    
 
    countRoom = $(this).val(); 
 
    $(".numberTravelers").empty() 
 
    for (i = 1; i <= countRoom; i++) { 
 
     $(".numberTravelers").css("width", "100%").append('<div class="countRoom"><div class="numberOfRooms">room</div> <div class="inner-items" style="margin-left: 5px; width: 49%;"><div class="title-item">adult</div><select name="_root.rooms__' + i + '.adultcount"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div><div class="inner-items style="width: 49%;""><div class="title-item">child(</div><select name="childcount" class="childcount" onchange="childAge(this)"><option value="0"> 0 </option><option value="1"> 1 </option> <option value="2"> 2 </option><option value="3"> 3 </option><option value="4"> 4 </option></select></div><div class="selectAge"></div><input type="hidden" name="_root.rooms__' + i + '.childcountandage" class="childcountandage"/></div><div class="clr"></div>') 
 

 
    } 
 
    }); 
 

 
    $(".submit").click(function() { 
 
    $(".countRoom").each(function(index, element) { 
 
     var childCount = $(this).find(".childcount").val(); 
 

 
     var childAge = " "; 
 
     $(this).find(".childage").each(function(index, element) { 
 
     childAge = childAge + ',' + $(this).val(); 
 
     }); 
 
     //childAge=childAge.substring(0,childAge.length - 1); 
 
     $(this).find(".childcountandage").val(childCount + childAge); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type="text" id="allcount" value="room:1 ,adult:1 , child :1" /> 
 
<div class="title-item">room count</div> 
 
<select name="roomCount" id="roomCount"> 
 
<option value="1" class="btn2"> 1 </option> 
 
<option value="2" class="btn2"> 2 </option> 
 
</select> 
 

 
<div class="numberTravelers"> 
 
    <div class="countRoom"> 
 
    <div class="inner-items" style="margin-left: 5px;"> 
 
     <div class="title-item">adult</div> 
 
     <select name="_root.rooms__1.adultcount"> 
 
     <option value="1"> 1 </option> 
 
     <option value="2"> 2 </option> 
 
    </select> 
 
    </div> 
 
    <div class="inner-items"> 
 
     <div class="title-item">Child</div> 
 
     <select name="childcount" class="childcount" onChange="childAge(this)"> 
 
     <option value="0"> 0 </option> 
 
     <option value="1"> 1 </option> 
 
     <option value="2"> 2 </option> 
 
    </select> 
 
    </div> 
 
    <div class="selectAge"></div> 
 
    <input type="hidden" name="_root.rooms__1.childcountandage" class="childcountandage" /> 
 
    </div> 
 
    <div class="clr"></div> 
 
</div>

Answer 1

は、私はいくつかのサンプルを作成しました： ここで私の抜粋です仕事、添付はここjsfiddle

https://jsfiddle.net/pq1qhggu/3/

問題は、したがって、すべての選択がバインで、身体の変化に火災のイベントが原因であります名前が同じであれば、その後、計算

$(document).on('change', 'select', function(){ 
    var $this = $(this); 
    var $name = $this.attr('name'); 

    if ($name === 'roomCount'){ 
     rCount = $this.toArray().reduce(function(prev, current){ 
        prev += parseInt($(current).val()); 
        return prev; 
        },0); 
    }else if ($name === '_root.rooms__1.adultcount'){ 
     aCount = $this.toArray().reduce(function(prev, current){ 
        prev += parseInt($(current).val()); 
        return prev; 
        },0); 
    }else if ($name === 'childcount'){ 
     cCount = $this.toArray().reduce(function(prev, current){ 
        prev += parseInt($(current).val()); 
        return prev; 
        },0); 
    } 
$('#allcount').val('room:'+rCount+'adult:'+aCount+' child:'+cCount); 
}); 

を行うと、私はまた、変更、gが同時に発射ので、私はちょっとハードコード名のチェックを追加することから

$("#roomcount") 

へ

$("#allcount") 

なぜroomcountがallcountの代わりに変更された場合にのみ解雇されるのかわかりませんか？