javascript - 多重选择菜单值并用值更新表

Question

我有一个包含各种选项值的选择菜单。如果所选值小于 25，我需要将所选值乘以“10”，如果所选值是 25 或更大，我需要将其乘以“12”。

我是 JS 新手。我可以使用下面的代码乘以 10 来使其工作，但我不知道如何编写 if/else 语句来检查选择是否小于 25 并乘以 10 或 25 或更大并乘以到 12 点。

HTML:

<table width="100%" border="0">
  <tr>
    <td>
      <select id="licenseRegs">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="75">75</option>
        <option value="100">100</option>
        <option value="125">125</option>
      </select>
      </td>

      <td id="total-price">Price show here</td>
    </tr>
  </table>

Javascript:这会将所有选择值乘以 10。如果小于 25，我需要它乘以 10，但如果等于或大于 25，则乘以 12。

// calculate price of # of computer selection
$(document).ready(function() {
  var pricePerReg = 10;
  var licenseRegsSelect = $('#licenseRegs');

  function updateTotalPrice() {
    licenseRegs = licenseRegsSelect.val();
    $('#price').html(pricePerReg * licenseRegs);
  }

  licenseRegsSelect.change(function() {
    updateTotalPrice();
  });

  updateTotalPrice();
});

Answer 1

使用您的代码， 我添加了一个 if/else 语句(希望根据您对问题的描述，它是不言自明的。它就是这样做的 - 检查 licenseRegs 是否小于或大于或等于 25。 )。

我还使用内置的 parseInt() 来获取整数形式的数字；它存储为字符串。 (这是“25”(字符串)和 25(整数)之间的区别。 这可能不是必要的，但这是一个很好的做法。请参阅此问题以获取更多信息:How do I convert a string into an integer in JavaScript?

// calculate price of # of computer selection
$(document).ready(function() {
  var pricePerRegUnder = 10;
  var pricePerRegAbove = 12;
  var licenseRegsSelect = $('#licenseRegs');

  function updateTotalPrice() {

    licenseRegs = parseInt(licenseRegsSelect.val(), 10);

    ///////////// New code here ////////////
    var total;
    if (licenseRegs < 25) {
      total = licenseRegs * pricePerRegUnder;
    } else {
      total = licenseRegs * pricePerRegAbove;
    }
    //////////// Ends here /////////////////

    $('#price').html(total);
  }

  licenseRegsSelect.change(function() {
    updateTotalPrice();
  });

  updateTotalPrice();
});