如何计算旅客总数

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

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

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

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

Answer 3

您应该将所选选项的文本转换为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 4

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

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

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>