我有一个用于选择价格选项的下拉菜单。默认选项是 select,然后一旦选择了一个选项,我会更新 Total Price 值以反映选项价格。这样就可以了,但是如果您再次选择“选择”,我的总价值中会出现“未定义”...
这是代码
标记
<form class="optionsForm" name="form{$option.optionID}" action="/view-cart.html" enctype="multipart/form-data" method="post" >
<input type="hidden" value="{$option.optionPrice}" name="productPrice" id="optionPrice" />
<input type="hidden" value="{$product.productID}" name="instanceID" />
<input type="hidden" value="add" name="action"/>
<input type="hidden" value="products" name="componentID"/>
<input type="hidden" value="{$option.optionID}" name="options[optionID]" id="optionID"/>
<input type="hidden" value="add" name="action"/>
{* If there is only one option, don't show the select option row *}
{if count($product.productOptions) > 1}
<h4 class="optionsFormTitle">Please select your options</h4>
<div class="optionsRow">
<select name="options" class="dropDown">
<option value="0.00">Select</option>
{foreach $product.productOptions option}
<option value="{$option.optionID}">{$option.optionTitle}
{if $option.optionPrice > $product.pricesFrom} £{$option.optionPrice}{/if}
</option>
{/foreach}
</select>
</div>
{/if}
<div {if count($product.productOptions) > 1} class="totalRow" {else} class="noOptionTotalRow" {/if} >
Total<span class="productPrice optionPrice"> £0.00</span>
<input type="submit" value="Add To Basket" class="buyNowButton" />
</div>
</form>
Javascript...
products.prices = new Array;
$.get('/ajax/' + window.location.pathname, function(data) {
for (var optionID in data)
products.prices[optionID] = data[optionID];
$('.optionsRow select').change(function() {
var requested = $(this).val();
$('.optionPrice').html('£' + products.prices[requested]);
$('#optionPrice').val(products.prices[requested]);
$('#optionID').val(requested);
});
});