如何使用jquery计算来自多个select的值之和?

我有多个具有相同类名的选择。如何计算所选选项的总和?

我的html/Twig(我还有6个类似于“成人选择”类的选择)

<select class="adults-select" data-type="adults">
   {% for i in 1..5 %}
   <option value="{{ i }}">{{ i }}</option>
   {% endfor %}
</select>

我的Jquery

$(document).on('change', '.adults-select', function(){
   var sum = 0;
   $("select.adults-select option:selected").each(function(){
      sum += Number($(this).val());
   });
console.log(sum);
});

如果我用 sum += Number($(this).val()); 我选了3个成年人,在控制台里选了12个。

如果我用 sum += parseInt($(this).val()); 我让南在我的控制台

如果我用 sum += $(this).val(); 我的控制台里有03111111之类的东西。

所以,基本上,我怎样才能得到我的选择值的总和?

添加了HTML代码

<!-- BEGIN common_search_form_hotel -->
<form id="search_hotel_form" action="{{__pages.search_hotel}}" class="container">
  <div class="form-search-table">
    <div id="hotel-search-city-and-name" class="hotel-row-0 d-flex">
      <div class="d-flex mb-3 flex-fill">
        {#<span class="input-icon align-self-center">#}
        {#  <img src="{{__globals.config.paths.upload}}/assets/images/flag.png">#}
        {#</span>#}
        <input class="input_search_in_2 flex-fill shadow-sm" id="hotel_city_name" placeholder="{% filter translate|e %}Choose a city for destination{% endfilter %}" type="text" required />
        <input type="text" id="hotel_city_id" required style="display:none;"/>
      </div>

    </div>
    {#<div class="hotel-row-1">#}



        <input id="hotel-checkin-date" class="input_search_with_title" type="text" required>

        {#<p class="div_title_hotel">{% filter translate %}check-out{% endfilter %}</p>#}
        <input id="hotel-checkout-date" class="input_search_with_title" type="text" required>
      {#</div>#}

<div class="hotel-row-2 template hotel_rooms" id="hotel_room_template">

    <div class="room_people_margin_left d-flex">

        <div class="mb-3 d-block d-md-inline-flex order-2 order-md-1">

          {# makeselectpicker #}

          <div class="titles">
              <p class="div_title_adults">{% filter translate %}Adults{% endfilter %}</p>

              <p class="div_title_children">{% filter translate %}Children{% endfilter %}</p>

              <p class="div_title_child_age1">{% filter translate %}Child 1 Age{% endfilter %}</p>

              <p class="div_title_child_age2">{% filter translate %}Child 2 Age{% endfilter %}</p>
          </div>

          <select class="adults-select" data-above-text="{% filter translate|e %}adults{% endfilter %}" data-type="adults">
              <option value="" disabled >Number of Adults</option>
            {#<optgroup label="{% filter translate|e %}adults{% endfilter %}">#}
              {#{% for i in 1..5 %}#}
              {#<option value="{{ i }}">{{ i }}</option>#}
              {#{% endfor %}#}
              <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>
            {#</optgroup>#}
          </select>

          <select class="children-select" data-above-text="{% filter translate|e %}children{% endfilter %}" data-type="children">
              <option value="" disabled >Number of Children</option>
            {#<optgroup label="{% filter translate|e %}children{% endfilter %}">#}
              {% for i in 0..2 %}
              <option value="{{ i }}">{{ i }}</option>
              {% endfor %}
            {#</optgroup>#}
          </select>

          <select class="child-age-select-1" data-above-text="{% filter translate|e %}age child 1{% endfilter %}" data-type="child_1_age" >
            {#<optgroup label="{% filter translate|e %}age child 1{% endfilter %}">#}
            <option value="" disabled >Child 1 Age</option>
              {% for i in 0..17 %}
              <option value="{{ i }}">{{ i == 0 ? ("&lt;1y"|translate) : ( i == 1 ? ('1y'|translate) : ('%dy'|translate|format(i))) }}</option>
              {% endfor %}
            {#</optgroup>#}
          </select>

            {# child-age-select2 #}
          <select class="child-age-select-2 " data-above-text="{% filter translate|e %}age child 2{% endfilter %}" data-type="child_2_age">
              <option value="" disabled >Child 2 Age</option>
            {#<optgroup label="{% filter translate|e %}age child 2{% endfilter %}">#}
              {#<optgroup label="{% filter translate|e %}age child 1{% endfilter %}">#}
              {% for i in 0..17 %}
              <option value="{{ i }}">{{ i == 0 ? ("&lt;1y"|translate) : ( i == 1 ? ('1y'|translate) : ('%dy'|translate|format(i))) }}</option>
              {% endfor %}
            {#</optgroup>#}
          </select>
        </div>


        <div class="">
            <p class="div_title_hotel">{% filter translate %}Rooms{% endfilter %}</p>

          {#<span class="input-icon align-self-center">#}
          {#  <img src="{{__globals.config.paths.upload}}/assets/images/bed.png" class="">#}
          {#</span>#}

        <select class="rooms-select shadow-sm" required data-type="rooms">
            <option value="" disabled selected="selected" >Number of Rooms</option>
            {#<optgroup label="{% filter translate %}rooms{% endfilter %}">#}
              {% for i in 1..5 %}
              <option value="{{ i }}">{{ i }}</option>
              {% endfor %}
            {#</optgroup>#}
          </select>
            <input type="text" class="col-6 shadow-sm input_search_with_title" name="datefilterhotel" readonly="readonly" placeholder="Pick your Dates" value="" style="font-size:0.8em" />
        </div>
      </div>
    </div>
    <input class="input_search_in_2 flex-fill" id="hotel_name" placeholder="{% filter translate|e %}hotel name{% endfilter %} ({% filter translate|e %}optional{% endfilter %})" type="text" required/>
          {#<span class="input-html-placeholder"><span class="input-html-placeholder-content">{% filter translate %}hotel's name{% endfilter %} <em>({% filter translate %}optional{% endfilter %})</em></span></span>#}
  </div>

  <a id="hotel_search_button" href="javascript:void(0);">
    <p class="search_big_but search_hotel">{% filter translate %}Find your best accommodation{% endfilter %}</p>
  </a>
  <input type="submit" style="display:none" />
</form>
<!-- END common_search_form_hotel -->