javascript - 选择时添加额外计数

Question

我有简单的预订表格，主要输入类型为文本。我显示了每个选择框的最终结果。我的问题是当我选择 2 间房间时。成人的数量更改为 2 ，而我从不选择 2 成人，并且我无法在输入类型文本中更改此值。如果将房间数的值更改为 2。您也可以看到成人的值发生变化。这是不正确的。这是我的片段:

$(document).ready(function(e) {
  
  $('body').on('change', 'select', function(){
	  
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

我创建了一些示例，我不确定这个 childAge 是什么，因为示例中没有包含它，希望这能让您了解它是如何工作的，附件是 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);
});

我也改变了

$("#roomcount") 

至

$("#allcount")

不知道为什么只在 roomcount 发生变化而不是 allcount 时触发？