Question

我在酒店预订了一个迷你代码，使用selectbox我会添加以下数字：

酒店的房间
成年乘客
孩子。

我的问题是，如何在ID为allcount的输入中显示成人和儿童的数量？

例如我在inputbox中写了默认值，并且我想在每次选择框更改时更改这些值。

这是我的片段：

＆＃13;

$(document).ready(function(e) {
  $("#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);
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id="allcount" value="adult:1 , child :1" />

<div class="title-item">room count</div>
<select name="rooms" id="roomCount">
    <option value="1" class="btn2"> 1 </option>
    <option value="2" class="btn2"> 2 </option>
    <option value="3" class="btn2"> 3 </option>
    <option value="4" class="btn2"> 4 </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>
      <option value="3"> 3 </option>
      <option value="4"> 4 </option>
      <option value="5"> 5 </option>
      <option value="6"> 6 </option>
      <option value="7"> 7 </option>
      <option value="8"> 8 </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>
      <option value="3"> 3 </option>
      <option value="4"> 4 </option>
     </select>
    </div>
    <div class="selectAge"></div>
    <input type="hidden" name="_root.rooms__1.childcountandage" class="childcountandage" />
  </div>
  <div class="clr"></div>
</div>

＆＃13;

Answer 1

也许您应该在“选择”框中添加事件并解析值。我做了一个小片段

$('body').on('change', 'select', function(){

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('adult:'+acount+' child:'+ccount);
});

如何显示最终结果作为输入中的值

1 个答案: