时间戳

首页 > 解决方案 > 如何使用 jquery 计算来自多个选择的值的总和？

javascript - 如何使用 jquery 计算来自多个选择的值的总和？

问题描述

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

我的 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());，我会在控制台中获得 Nan

如果我使用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 -->

标签： javascriptjqueryhtml

解决方案

试试这个：您正在使用.val()但 jquery 选择器是选项而不是选择元素。此外，如果 parseInt 失败，您可以返回 0 进行额外检查

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

推荐阅读