如何计算乘客总数

Question

我想编码来计算成人，儿童和婴儿乘客的总数。我尝试了jquery，但没有计算所有乘客的总数。

提前致谢

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/wn1phe51/

Answer 2

使用值时，请确保使用parseInt（），否则Javascript可能会将其视为字符串并采取相应的行动。

Answer 3

您应该将所选选项的文本转换为int值，并使用parseInt()函数执行此操作：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果要获得总数，则应将值转换为整数。更新您的代码，如下所示。

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

Answer 5

这里如果你将multilpy乘以1，那么它将字符串（即数字）转换为数字：tot = $（this）.text（）* 1;

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;