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

Posted 2023-05-07

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

【英文标题】：How to get total data-price from all Select options (Total up each select)

【发布时间】：2018-01-11 12:02:24

【问题描述】：

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

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

它希望我添加更多信息，但实际上我无法添加更多信息。所以这里有一些 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=""  >
        </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"  >
        </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>

【问题讨论】：

你可以用 php 来做。然后，如果您想将 php 返回到 javascript，您可以将 ajax 与 json 结合使用。观看此视频中的 php 代码，您可能会发现它对您有所帮助：youtube.com/watch?v=ZdkM8A3sJpY

【参考方案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 切换为黑色...以查看它。 我不明白您为什么将其设置为白色。

【参考方案2】：

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