我需要计算数据价格属性而不是选项值,我已经创建了可以正常工作的代码,但是我的数据库有不同的列,我不想改变,下面的例子可以正常工作但是我想要知道我应该做些什么来获得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>
我们将非常感谢您对此方面的帮助。
只是改变一下:
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>