javascript - 如何从所有选择选项中获取总数据价格(每个选择总计)

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

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

parseFloat 确保您获得加法的 float ，因为这是 HTML 中的文本。
并且 .tofixed(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

此外...我将颜色切换为黑色...以查看它。
我不明白你为什么将它设置为白色。