使用jQuery计算2个不同的选择自定义数据属性

问题描述 投票:-1回答:1

我需要计算数据价格属性而不是选项值,我已经创建了可以正常工作的代码,但是我的数据库有不同的列,我不想改变,下面的例子可以正常工作但是我想要知道我应该做些什么来获得data-price属性的值

$('#CPU').on("change",function(){
    var CPU = $("#CPU option:selected").attr('data-price');
    $("#SelectedCPUResult").html(CPU);
});

// Update Product Tenure Price on select on product.php
$('#RAM').on("change",function(){
    var RAM = $("#RAM option:selected").attr('data-price');
    $("#SelectedRAMResult").html(RAM);
});
$(function () {
    var fields = $('#form1 :input').change(calculate);

    function calculate() {
        var price = 0;
        fields.each(function () {
            price += +$(this).val();
        })
        $('#price').html(price.toFixed(2));
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
  <div>
    <label for="CPU">CPU</label>
    <select name="CPU" id="CPU">
      <option value="">Select CPU</option>
      <option value="9.99" data-price="9.99">1 Month</option>
      <option value="19.99" data-price="19.99">3 Months</option>
      <option value="29.99" data-price="29.99">6 Months</option>
      <option value="39.99" data-price="39.99">12 Months</option>
      <!-- Actual fields -->
      <!-- <option value="1" data-price="9.99">1 Month</option> -->
      <!-- <option value="3" data-price="9.99">3 Months</option> -->
      <!-- <option value="6" data-price="9.99">6 Months</option> -->
      <!-- <option value="12" data-price="9.99">12 MOnths</option> -->
    </select>
    <span id="SelectedCPUResult">9.99</span>
  </div>
  <div>
  <label for="RAM">RAM</label>
  <select name="RAM" id="RAM">
    <option value="">Select RAM</option>
    <option value="9.99" data-price="9.99">1 Month</option>
    <option value="19.99" data-price="19.99">3 Months</option>
    <option value="29.99" data-price="29.99">6 Months</option>
    <option value="39.99" data-price="39.99">12 Months</option>
    <!-- Actual fields -->
    <!-- <option value="monthly" data-price="9.99">1 Month</option -->
    <!-- <option value="quarterly" data-price="9.99">3 Months</option> -->
    <!-- <option value="semianuually" data-price="9.99">6 Months</option> -->
    <!-- <option value="annually" data-price="9.99">12 Months</option> -->

  </select>
    <span id="SelectedRAMResult">9.99</span>
  </div>
</form>
<hr>
Price: <u id="price">19.98</u>

我们将非常感谢您对此方面的帮助。

javascript jquery
1个回答
1
投票

只是改变一下:

function calculate() {
    var price = 0;
    fields.each(function () {
        price += parseFloat($(this).attr('data-price'));
    })
    $('#price').html(price.toFixed(2));
}

您正在使用“.val()”(获取值)并将其更改为“.attr('data-price')”(找到具有“data-price”名称的属性)并将其转换为一个浮子。

$('#CPU').on("change",function(){
    var CPU = $("#CPU option:selected").attr('data-price');
    $("#SelectedCPUResult").html(CPU);
});

// Update Product Tenure Price on select on product.php
$('#RAM').on("change",function(){
    var RAM = $("#RAM option:selected").attr('data-price');
    $("#SelectedRAMResult").html(RAM);
});
$(function () {
    //var fields = $('#form1 :input').change(calculate);
    $('#form1 :input').change(calculate);


    function calculate() {
        var price = 0;
        $('.partial').each(function (idx, el) {
          
            price += parseFloat($(el).html());
        })
        $('#price').html(price.toFixed(2));
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
  <div>
    <label for="CPU">CPU</label>
    <select name="CPU" id="CPU">
      <option value="">Select CPU</option>
      <option value="1" data-price="9.99">1 Month</option> 
      <option value="3" data-price="19.99">3 Months</option> 
      <option value="6" data-price="29.99">6 Months</option> 
      <option value="12" data-price="39.99">12 MOnths</option> 
    </select>
    <span class="partial" id="SelectedCPUResult">9.99</span>
  </div>
  <div>
  <label for="RAM">RAM</label>
  <select name="RAM" id="RAM">
    <option value="">Select RAM</option>
    <option value="monthly" data-price="9.99">1 Month</option>
    <option value="quarterly" data-price="19.99">3 Months</option>
    <option value="semianuually" data-price="29.99">6 Months</option>
    <option value="annually" data-price="39.99">12 Months</option>
  </select>
    <span class="partial" id="SelectedRAMResult">9.99</span>
  </div>
</form>
<hr>
Price: <u id="price">19.98</u>
© www.soinside.com 2019 - 2024. All rights reserved.