如何计算乘客总数

Question

我想编写代码来计算成人、儿童和婴儿乘客的总数。我试过 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>

Answer 1

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

Answer 2

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

$("select").on('change', function() {
        var str = 0;
        $(".passenger option:selected").each(function() {
            str += parseInt($(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>

Answer 3

如果你想得到总数，你应该把值转换成整数。如下所示更新您的代码。

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

Answer 4

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

$("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/

Answer 5

在这里，如果你乘以 1，那么它隐式地将字符串（这是数字）转换为数字：tot = $(this).text() * 1;

     $("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();

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

如何计算乘客总数

How to calculate the total number of passengers

javascript

jquery

html-select

twitter-bootstrap