Question

我需要计算data-price属性而不是期权价值，我创建了可以与value配合使用的代码，但是我的数据库具有我不想更改的其他列，下面的示例对value可以配合使用，但是我想知道应该进行哪些更改才能获取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>

我们将非常感谢您在这方面的帮助。

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

使用jQuery计算2种不同的选择定制数据属性

1 个答案: