单击 select 选项后更新产品价格在 opencart 中显示错误

Question

当我点击 selected 选项时，产品价格更新显示错误。这是我的代码

<div class="container">
      <div class="row">
      <div class="col-md-6">Initial Price: <span id="thisIsOriginal" class="">,000.00</span></div>
      <div class="col-md-6">Total: <span id="total">,000.00</span></div>
      </div>
      <div class="row">
        <select class="optionPrice" name="select-1">
          <option value="">Please Select</option>
          <option data-price="2,000.00" value="20">+,000.00</option>
        </select>
      </div>
    </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.optionPrice').change(function () {
        var OriginalPrice = $('#thisIsOriginal').text();
        var OriginalCurrency = OriginalPrice.substring(0, 1);
        OriginalPrice = OriginalPrice.substring(1);
        var total = 0;
        $('.optionPrice').each(function () {
            if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
                console.log($('option:selected', this).attr("data-price"));
                total += parseFloat($('option:selected', this).attr('data-price'));
            }
        });
        var newTotal = parseFloat(OriginalPrice) + parseFloat(total);
        $('#total').text('$' + newTotal.toFixed(2));
    });
});
</script>

如何解决这个issue.I要在select价格显示47,000之后。

Answer 1

你的代码有问题，

您的价格包含 ,。所以在 parseFloat() 之后，逗号后面的值被截断了。您需要在使用 parseFloat 之前删除逗号。

需要对以下行进行更改，

 total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));

和

var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);

Updated Fiddle

  $('.optionPrice').change(function() {
    var OriginalPrice = $('#thisIsOriginal').text();
    var OriginalCurrency = OriginalPrice.substring(0, 1);
    OriginalPrice = OriginalPrice.substring(1);

    var total = 0;
    $('.optionPrice').each(function() {
      if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
        console.log($('option:selected', this).attr("data-price"));
        total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));

      }
    });
    var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
    $('#total').text('$' + newTotal.toFixed(2));
  });

编辑获取逗号分隔值，

$('.optionPrice').change(function() {
  var OriginalPrice = $('#thisIsOriginal').text();
  var OriginalCurrency = OriginalPrice.substring(0, 1);
  OriginalPrice = OriginalPrice.substring(1);
  var total = 0;
  $('.optionPrice').each(function() {
    if ($(this).find('option:selected').attr('data-price') != 0 && $(this).find('option:selected').attr('data-price') != undefined) {
      console.log($('option:selected', this).attr("data-price"));
      total += parseFloat($('option:selected', this).attr('data-price').replace(/,/g, ""));
    }
  });
  var newTotal = parseFloat(OriginalPrice.replace(/,/g, "")) + parseFloat(total);
  newTotal = numberWithCommas(newTotal);
  $('#total').text('$' + newTotal + ".00");
});

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

单击 select 选项后更新产品价格在 opencart 中显示错误

After click the select option update product price shows wrong in opencart

javascript

php

jquery

option

opencart