javascript - 如何计算旅客总数

我想编码以计算成人， child 和婴儿乘客的总数。我尝试使用jquery，但没有计算所有乘客的总数。

提前致谢

https://jsfiddle.net/devefrontend/21036h5c/12/

$("select").on('change', function() {
    var str = "";
    $(".passenger option:selected").each(function() {
        str += $(this).text() + " ";
    });
     $("#count").text(str);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <label>Dewasa <span id="count">0</span></label>
    <select name="adult" class="form-control passenger">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
    <select name="child" class="form-control passenger">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
    <select name="infant" class="form-control passenger">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
</div>

最佳答案

您试图将字符串添加为数字。以下代码采用选项的文本值并将其转换为数字。

$("select").on('change', function() {
        var count = 0;
        $(".passenger option:selected").each(function() {
            count += parseInt($(this).text());
        });
        $("#count").text(count);
    }).change();

label {
  display:block;
  background:skyblue;
  color:#fff;
  padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
                  <label>Dewasa <span id="count">0</span></label>
                  <select name="adult" class="form-control passenger">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                  </select>
                  <select name="child" class="form-control passenger">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                  </select>
                  <select name="infant" class="form-control passenger">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                  </select>
                </div>

https://jsfiddle.net/wn1phe51/