算术的JQuery变量被视为字符串[重复]答案

【问题标题】：JQuery Variables for Arithmetic being treated as strings [duplicate]算术的JQuery变量被视为字符串[重复]
【发布时间】：2016-01-08 07:25:16
【问题描述】：

我正在尝试使用以下代码中的 html 选择框和 jquery 来获取所选月份的 3 个月。该代码不是将两个变量添加在一起，而是将它们视为两个字符串。谁能帮我解决这个问题？

<body>
    <form role="form" class="form-inline">
        <div class="form-group">
            <label class="control-label" for="Q1Month">
                Quarter 1 Month
            </label>
            <select class="form-control" id="Q1Month">
                <option selected value=''>--Select Month--</option>
                <option value='1'>January</option>
                <option value='2'>February</option>
                <option value='3'>March</option>
                <option value='4'>April</option>
                <option value='5'>May</option>
                <option value='6'>June</option>
                <option value='7'>July</option>
                <option value='8'>August</option>
                <option value='9'>September</option>
                <option value='10'>October</option>
                <option value='11'>November</option>
                <option value='12'>December</option>
            </select>
        </div>
    </form>
    <script src="js/jquery.js"></script>
    <script>
    $(function() {
        $('#Q1Month').change(function() {
            var month = $(this).val();
            $('#Q2Month').val(month);
            var advanceby = 3;
            var newmonth = month + advanceby;
            window.alert(newmonth);
        });
    });
    </script>
</body>

【问题讨论】：

标签： javascript jquery html variables

【解决方案1】：

val() 总是返回字符串，所以在添加之前使用 parseInt() 将字符串转换为整数

$(function() {
  $('#Q1Month').change(
    function() {
      var month = parseInt($(this).val(),10);
      $('#Q2Month').val(month);
      var advanceby = 3;
      var newmonth = month + advanceby;
      window.alert(newmonth);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form role="form" class="form-inline">
  <div class="form-group">
    <label class="control-label" for="Q1Month">
      Quarter 1 Month
    </label>
    <select class="form-control" id="Q1Month">
      <option selected value=''>--Select Month--</option>
      <option value='1'>January</option>
      <option value='2'>February</option>
      <option value='3'>March</option>
      <option value='4'>April</option>
      <option value='5'>May</option>
      <option value='6'>June</option>
      <option value='7'>July</option>
      <option value='8'>August</option>
      <option value='9'>September</option>
      <option value='10'>October</option>
      <option value='11'>November</option>
      <option value='12'>December</option>
    </select>
  </div>
</form>

【讨论】：

代码转储没有帮助，添加一些解释

【解决方案2】：

因为你获取的值是一个字符串！您需要的是选项索引和实际值，因此请尝试访问当前选定的选项索引而不是值，然后添加 3 并重置所需的元素。希望我有所帮助

【讨论】：

【解决方案3】：

当从 DOM 中读取任何值时，它都是字符串。要将其转换为数字，您可以使用一元 + 运算符。

在值前添加+

var month = +$(this).val();

+也是Javascript中的拼接运算符，所以当任一操作数为字符串时，+用于字符串拼接。

$(function() {
  $('#Q1Month').change(
    function() {
      var month = $(this).val();
      $('#Q2Month').val(month);
      var advanceby = 3;
      var newmonth = month + advanceby;
      window.alert(newmonth);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form role="form" class="form-inline">
  <div class="form-group">
    <label class="control-label" for="Q1Month">
      Quarter 1 Month
    </label>
    <select class="form-control" id="Q1Month">
      <option selected value=''>--Select Month--</option>
      <option value='1'>January</option>
      <option value='2'>February</option>
      <option value='3'>March</option>
      <option value='4'>April</option>
      <option value='5'>May</option>
      <option value='6'>June</option>
      <option value='7'>July</option>
      <option value='8'>August</option>
      <option value='9'>September</option>
      <option value='10'>October</option>
      <option value='11'>November</option>
      <option value='12'>December</option>
    </select>
  </div>
</form>

【讨论】：