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。

＆＃13;

<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>

＆＃13;

Answer 1

您必须在data-price元素的change上获取每个选定的select值。
然后添加很简单。

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);
  });
});

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

2 个答案: