总结多个选择框的值
我想总结一些来自多个选择框的值。问题是这些选项包含文本和数字。我只需要这些数字并将其总结起来。没有其他办法可以做到这一点。 所以我试图从字符串中去掉文本,然后每次更改选择框时更新金额。现在结果总是错误的。总结多个选择框的值
我的另一个问题是,有时在号码前有一个减号。有什么方法可以从总体中提取出来吗?在小提琴的第三个选择框中有一个例子。
任何人都可以帮忙吗?我创建了一个Fiddle here
HTML
<form method="post" id="product_configure_form" action="cart/add/14161745">
<div class="product-info-options tui">
<input type="hidden" value="" id="product_configure_bundle_id" name="bundle_id">
<div class="product-configure">
<div class="product-configure-custom">
<div class="product-configure-custom-option">
<label for="product_configure_custom_604623">Stoffering: <em>*</em>
</label>
<select id="product_configure_custom_604623" name="custom[604623]">
<option selected="selected" disabled="disabled" value="">Maak een keuze...</option>
<option value="5217777">Camira 24/7 *snellever - 2 weken</option>
<option value="5217779">Staccato *snellever - 2 weken (+€27,00)</option>
<option value="5217781">Leer 1 Trento *snellever - 2 weken (+€85,00)</option>
<option value="5217783">Leer 2 Litano (+€172,00)</option>
</select>
<div class="product-configure-clear"></div>
</div>
<div class="product-configure-custom-option">
<label for="product_configure_custom_603895">Armlegger frame kleur: <em>*</em>
</label>
<select id="product_configure_custom_603895" name="custom[603895]">
<option selected="selected" disabled="disabled" value="">Maak een keuze...</option>
<option value="5217785">zwart gecoat</option>
<option value="5217787">aluminium gecoat (+€11,00)</option>
<option value="5217789">aluminium gepolijst (+€11,00)</option>
<option value="5217791">verchroomd (+€53,00)</option>
</select>
<div class="product-configure-clear"></div>
</div>
etc............
JQUERY
function update_amounts() {
var sum = 0.0;
$('#product_configure_form .product-configure-custom-option select').each(function() {
var price = $(this).find('option:selected').text();
var priceClean = price.replace(/[^0-9]/g, '');
priceClean = parseFloat(priceClean) || 0;
sum += priceClean;
});
$('#amount').text('€' + sum.toFixed(2));
}
$("#product_configure_form .product-configure-custom-option select").change(function() {
update_amounts();
});
假设你不能在所有更改HTML结构,并且最后一个括号包含价格(如果有):
function update_amounts() {
var sum = 0.0;
$('#product_configure_form .product-configure-custom-option select').each(function() {
var optionText = $(this).find('option:selected').text();
var matches = optionText.match(/\(([^)]+)\)/g) || [];
if (matches.length > 0) {
var priceText = matches[matches.length - 1];
if (priceText.indexOf("€") > -1) {
var priceClean = priceText.replace(/[^0-9\+\-\.\,]/g, '');
var priceValue = parseFloat(priceClean) || 0;
sum += priceValue;
}
}
});
$('#amount').text('€' + sum.toFixed(2));
}
$("#product_configure_form").on("change", ".product-configure-custom-option select", update_amounts);
您可能需要广告只是“priceClean”正则表达式取决于您的小数点字符。
这就是我的意思。我无法更改此解决方案的html ... thx! – Meules 2014-11-04 09:47:36
如果你不想把这些数字的值,那么你可以使用HTML data attributes。
所以,你可以把你的选择框是这样的:
<select id="mySelectBox">
<!--selected as an example-->
<option value="123" data-price="27000" selected>Some Stuff ($27,000)</option>
<option value="124" data-price="12000">Magic Sword ($12,000)</option>
</select>
,然后使用jQuery,您可以提取使用data attribute
jQuery.data():
//27,000
var price = $('select#mySelectBox').find(':selected').data('price');
Thx这是我的正常途径,但我无法更改代码中的任何内容。 – Meules 2014-11-04 10:00:19
将数字放在'value'属性中,并使用它,而不是文本。 – Barmar 2014-11-03 23:01:06
你能否详细说明为什么“没有其他方法可以做到这一点”?有什么限制? – Fiddles 2014-11-03 23:40:47