如何从所有选择选项中获取总数据价格（总计每个选择）

Question

如何汇总每个选择选项并将它们加在一起？要获得他们的购买总额？这是我的代码：

我浏览了各种帖子并尝试更改代码，但没有成功。

它希望我添加更多信息，但实际上我无法添加更多信息。所以这里有一些 lorem ipsum

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

<ul style="height:100%;overflow: visible;"> 


  <li class="flip-container" style="z-index: 20;">
    <div class="flipper default">
      <div class="front">
        <h2>Case</h2>
      </div>
      <div class="back" style="height:auto;width:400px;padding:15px; ">
        <h2>click to choose</h2>
        <script>
          function casePreview(sel) {
            document.getElementById('case').src = "" + sel.options[sel.selectedIndex].value;
          }
        </script>
        <form name="prieviewselect">
          <div class="custom-select">
            <label for="select-choice1" class="label select-1"><span class="selection-choice">Please choose something</span> </label>
            <select id="case" class="select" onChange="casePreview(this)" >
              <option data-price="0">Please select 1</option>
              <?php $type = $con->query("SELECT * FROM parts WHERE type = 'case'");?>
              <?php while($case = $type->fetch_object()): ?>
              <option value="<?= $case->image ?>" data-price="<?= $case->price ?>"><?= $case->name ?></option>
              <?php endwhile;?>
            </select>
          </div>
          <img name="case" id='case' src="" width="300px" height="auto">
        </form>
      </div>
    </div>
  </li>


  <li class="flip-container" style="z-index: 20;">
    <div class="flipper default">
      <div class="front">
        <h2>PSU</h2>
      </div>
      <div class="back" style="height:auto;width:400px;padding:15px; ">
        <h2>click to choose</h2>
        <script>
          function psuPreview(sel) {
            document.getElementById('Imgpsu').src = "" + sel.options[sel.selectedIndex].value;
          }
        </script>
        <form name="prieviewselect">
          <div class="custom-select">
            <label for="select-choice1" class="label select-1"><span class="selection-choice">Please choose something</span> </label>
            <select id="psu" class="select" onChange="psuPreview(this)" >
              <option data-price="0">Please select 1</option>
              <?php $psut = $con->query("SELECT * FROM parts WHERE type = 'psu'");?>
              <?php while($psu = $psut->fetch_object()): ?>
              <option value="<?= $psu->image ?>" data-price="<?= $psu->price ?>"><?= $psu->name ?></option>
              <?php endwhile;?>
            </select>
          </div>
          <img id='Imgpsu' src="https://www.evga.com/articles/00823/images/hero/750G2_prod_shot.png" width="300px" height="auto">
        </form>
      </div>
    </div>
  </li>


  <div class="row" style="margin-top:20px;">
    <div class="col-xs-6">

      <p style="display:inline-block;font-size: 30px;">Total £</p>
      <input style="color:white;border:0px;font-size: 30px;background:none;display: inline-block" type="text" id="opt_price" />  

    </div>
    <div class="col-xs-6">
    </div>
  </div>

</ul>

Answer 1

您必须在change 的select 元素上获取每个选定的data-price 值。
那么加法就简单了。

parseFloat 确保您获得一个浮点数进行加法，因为那是 HTML 中的文本。
而.tofixed(2) 确保有 2 位小数。

$("select").on("change", function(){
  var total=0;
  $("select").each(function(){
    var price = parseFloat($(this).find("option:selected").data("price"));
    console.log( price );
    total += price;
  });
  $("#opt_price").css({"color":"black"}).val(total.toFixed(2))
});

CodePen

另外...我将color 切换为黑色...以查看它。
我不明白您为什么将其设置为白色。

Answer 2

$(document).ready(function() {
  var total = 0;
  $('.select').each(function() {
    total += parseFloat($(this).val()).toFixed(2);
  });
});