我在下面提供的页面中为我的产品提供了多种产品选项,在所有现代浏览器中,下拉菜单工作正常,包括一旦您更改了某些选项而自动更改价格但是在IE8和9上,下拉列表根本不起作用,不会出现其他选项。
我意识到的一个奇怪的解决方法是,如果我将所有javascript包含在页面底部的<!-- -->
标签(如下所示),则下拉列表工作但价格自动更新(再次在IE8上) / IE9)不起作用,所以不能只依靠它来切换它。
下面有相当多的代码,我不想错过任何内容,所以我已经把它全部包括在内,但是我不想让我看起来像是在扔所有代码并询问,这里帮助我。这是(关于javascript)与这些选项下拉和价格的关系。
HTML / Cubecart PHP元素
<div id="product_detail">
{if $PRODUCT.ctrl_sale}
<h1><span class="price_previous">{$PRODUCT.price}</span> <span class="price_sale" id="have_to_be_changed">{$PRODUCT.sale_price}</span></h1>
{$final_price = $PRODUCT.sale_price}
{else}
<h1 id="have_to_be_changed">{$PRODUCT.price}</h1>
{$final_price = $PRODUCT.price}
{/if}
</div>
的Javascript
<!----------------------------------- !!! ------------------------------->
var javascript_array = {$js_array};
var fade_timer;
console.log(discount_array);
$('.lets_change_the_price').change(function(){
var option_selected = $(this).val();
var option_id = $(this).attr('id');
var opt_class = $(this).attr('class');
option_id = option_id.replace('option_', '');
// console.log(option_selected);
// console.log(option_id);
var current_price = $('#have_to_be_changed').html();
console.log ('current before = '+current_price);
current_price = current_price.replace(currency_symbol,'');
current_price = current_price / $('#prev_mult').val();
current_price = current_price - $('#prev_'+option_id).val();
// console.log ('current after = '+current_price);
var new_price = (current_price*1) + (javascript_array[option_id][option_selected]['price'])*1;
embro_chage = (new_price*1) - (current_price*1);
new_price = new_price * $('#prev_mult').val();
// console.log (new_price);
$('#have_to_be_changed').html(currency_symbol+new_price.toFixed(2));
$('#prev_'+option_id).val(javascript_array[option_id][option_selected]['price']);
// font addon
if (option_id == 18) {
//console.log ('we have to show picture - '+opt_class);
}
});
<!----------------- --------------------------->
$('#option_price').change(function(){
if ($('#prev_1').val() >=0 ) {
var prev_price_1 = $('#prev_1').val();
} else {
var prev_price_1 = 0;
}
if ($('#prev_2').val() >=0 ) {
var prev_price_2 = $('#prev_2').val();
} else {
var prev_price_2 = 0;
}
var normal_price = $('#have_to_be_changed').html();
normal_price = normal_price.replace(currency_symbol,'');
normal_price = normal_price / $('#prev_mult').val();
var normal_price_original = normal_price;
console.log('current before multy = '+normal_price);
for( var i = 0; i < discount_array.length; i++ ) {
// console.log(discount_array[i][0]);
if ($(this).val()>=discount_array[i][0]) {
// console.log(discount_array[i][1]);
if (i==0) {
normal_price = discount_array[i][1] + (embro_chage*1)+(prev_price_1*1)+(prev_price_2*1);
} else {
normal_price = normal_price - discount_array[i][1];
}
}
}
// console.log('current after multy = '+normal_price);
var new_price = (normal_price*$(this).val())
$('#have_to_be_changed').html(currency_symbol+new_price.toFixed(2));
$('#prev_mult').val($(this).val());
// console.log(normal_price);
});
$('#have_embrodery').change(function(){
if ($(this).val() == 'Yes') {
$('#option_div_18').show();
} else {
// console.log('original_price - '+original_price);
// console.log($('#prev_1').val());
// console.log($('#prev_2').val());
// console.log($('#prev_mult').val());
embro_chage =0;
var new_price_add = $('#prev_1').val()*1;
var new_price_add_2 = $('#prev_2').val()*1;
var new_price_mult = $('#prev_mult').val()*1;
if (new_price_add_2) {
} else {
new_price_add_2 = 0;
}
var new_price2 = (((original_price*1)+(new_price_add*1)+(new_price_add_2*1))*(new_price_mult*1));
// console.log('original_price - '+original_price);
// console.log('new_price_add - '+new_price_add);
// console.log('new_price_mult - '+new_price_mult);
// console.log('new_price2 - '+new_price2);
$('#have_to_be_changed').html(currency_symbol+new_price2.toFixed(2));
$('#prev_18').val('0');
$('#option_div_18').hide();
$('#option_18').prop('selectedIndex',0);
$('#prev_19').val('0');
$('#option_div_19').hide();
$('#option_19').prop('selectedIndex',0);
$('#option_32').val('');
$('#option_div_32').hide();
$('#option_36').val('');
$('#option_div_36').hide()
$('#option_37').val('');
$('#option_div_37').hide()
$('#option_38').val('');
$('#option_div_38').hide()
$('#option_32').prop('selectedIndex',0);
$('#option_36').prop('selectedIndex',0);
$('#option_37').prop('selectedIndex',0);
$('#option_38').prop('selectedIndex',0);
$('#option_33').val('');
$('#prev_33').val('');
$('#option_div_33').hide();
$('#prev_34').val('');
$('#option_34').val('');
$('#option_div_34').hide();
$('#prev_35').val('');
$('#option_div_35').hide();
$('#prev_35').val('0');
$('#option_35').prop('selectedIndex',0);
$('#option_div_32').hide();
$('#option_div_33').hide();
$('#option_div_34').hide();
$('#option_div_36').hide();
$('#option_div_37').hide();
$('#option_div_38').hide();
$('#option_32').val('');
$('#option_33').val('');
$('#option_37').val('');
$('#option_34').val('');
$('#option_36').val('');
$('#option_38').val('');
$('#option_32').removeClass('required');
$('#option_33').removeClass('required');
$('#option_34').removeClass('required');
$('#option_36').removeClass('required');
$('#option_37').removeClass('required');
$('#option_38').removeClass('required');
}
});
$('#option_18').change(function(){
if ($(this).val() != '') {
$('#option_div_19').show();
} else {
$('#option_div_19').hide();
$('#option_19').prop('selectedIndex',0);
$('#option_div_32').hide();
$('#option_32').prop('selectedIndex',0);
$('#option_div_36').hide();
$('#option_36').prop('selectedIndex',0);
$('#option_div_37').hide();
$('#option_37').prop('selectedIndex',0);
$('#option_div_38').hide();
$('#option_38').prop('selectedIndex',0);
$('#option_div_33').hide();
$('#option_div_34').hide();
$('#option_div_35').hide();
$('#option_35').prop('selectedIndex',0);
}
});
$('#option_18').change(function(){
if ($(this).val() != '') {
$('#option_div_19').show();
$('#font_color_info').hide();
clearTimeout(fade_timer);
$('#font_color_info').html('<img src="{$STORE_URL}/images/font_color/'+$("select[id=option_18] option:selected").text()+'.jpg" />');
$('#font_color_info').show();
fade_timer = setTimeout(function(){ $('#font_color_info').fadeOut(200); },10000);
} else {
$('#font_color_info').hide();
$('#option_div_32').hide();
$('#option_div_36').hide();
$('#option_div_37').hide();
$('#option_div_38').hide();
$('#option_div_33').hide();
$('#option_div_34').hide();
$('#option_div_35').hide();
$('#option_35').prop('selectedIndex',0);
$('#option_32').val('');
$('#option_33').val('');
$('#option_37').val('');
$('#option_34').val('');
$('#option_36').val('');
$('#option_38').val('');
$('#option_32').removeClass('required');
$('#option_33').removeClass('required');
$('#option_34').removeClass('required');
$('#option_36').removeClass('required');
$('#option_37').removeClass('required');
$('#option_38').removeClass('required');
}
});
$('#option_19').change(function(){
if ($(this).val() != '') {
$('#option_div_35').show();
$('#font_color_info').hide();
clearTimeout(fade_timer);
$('#font_color_info').html('<img src="{$STORE_URL}/images/font_color/'+$("select[id=option_19] option:selected").text()+'.png" />');
$('#font_color_info').show();
fade_timer = setTimeout(function(){ $('#font_color_info').fadeOut(200); },10000);
} else {
$('#option_div_32').hide();
$('#option_div_36').hide();
$('#option_div_37').hide();
$('#option_div_38').hide();
$('#option_div_33').hide();
$('#option_div_34').hide();
$('#option_32').val('');
$('#option_33').val('');
$('#option_37').val('');
$('#option_34').val('');
$('#option_36').val('');
$('#option_38').val('');
$('#option_32').removeClass('required');
$('#option_33').removeClass('required');
$('#option_34').removeClass('required');
$('#option_36').removeClass('required');
$('#option_37').removeClass('required');
$('#option_38').removeClass('required');
}
});
$('#option_35').change(function(){
if ($(this).val() != '') {
//console.log ('true '+$(this).val());
// 3782 Left Breast option_div_32
// 3795 Right Hand Side option_div_33
// 3796 Above Header Bar option_div_34
// 3797 Right Hand Side & Above Header option_div_33 option_div_34
$('#option_div_32').hide();
$('#option_div_36').hide();
$('#option_div_37').hide();
$('#option_div_38').hide();
$('#option_div_33').hide();
$('#option_div_34').hide();
$('#option_32').val('');
$('#option_33').val('');
$('#option_37').val('');
$('#option_34').val('');
$('#option_36').val('');
$('#option_38').val('');
$('#option_32').removeClass('required');
$('#option_33').removeClass('required');
$('#option_34').removeClass('required');
$('#option_36').removeClass('required');
$('#option_37').removeClass('required');
$('#option_38').removeClass('required');
if ($("select[id=option_35] option:selected").text()=='Left Breast') {
$('#option_div_32').show();
$('#option_32').addClass('required');
$('#option_33').val('');
$('#option_33').removeClass('required');
$('#option_34').val('');
$('#option_34').removeClass('required');
$('#option_36').val('');
$('#option_36').removeClass('required');
$('#option_37').val('');
$('#option_37').removeClass('required');
$('#option_38').val('');
$('#option_38').removeClass('required');
}
if ($("select[id=option_35] option:selected").text()=='Right Hand Side') {
$('#option_div_33').show();
$('#option_33').addClass('required');
$('#option_32').val('');
$('#option_32').removeClass('required');
$('#option_34').val('');
$('#option_34').removeClass('required');
$('#option_36').val('');
$('#option_36').removeClass('required');
$('#option_37').val('');
$('#option_37').removeClass('required');
$('#option_38').val('');
$('#option_38').removeClass('required');
}
if ($("select[id=option_35] option:selected").text()=='Centre Above Header Bar') {
$('#option_div_34').show();
$('#option_34').addClass('required');
$('#option_32').val('');
$('#option_32').removeClass('required');
$('#option_33').val('');
$('#option_33').removeClass('required');
$('#option_36').val('');
$('#option_36').removeClass('required');
$('#option_37').val('');
$('#option_37').removeClass('required');
$('#option_38').val('');
$('#option_38').removeClass('required');
}
if ($("select[id=option_35] option:selected").text()=='In Centre') {
$('#option_div_37').show();
$('#option_32').val('');
$('#option_33').val('');
$('#option_36').val('');
$('#option_34').val('');
$('#option_38').val('');
$('#option_32').removeClass('required');
$('#option_33').removeClass('required');
$('#option_34').removeClass('required');
$('#option_36').removeClass('required');
$('#option_37').addClass('required');
$('#option_38').removeClass('required');
}
if ($("select[id=option_35] option:selected").text()=='On The Back') {
$('#option_div_36').show();
$('#option_32').val('');
$('#option_33').val('');
$('#option_37').val('');
$('#option_34').val('');
$('#option_38').val('');
$('#option_32').removeClass('required');
$('#option_33').removeClass('required');
$('#option_34').removeClass('required');
$('#option_36').addClass('required');
$('#option_37').removeClass('required');
$('#option_38').removeClass('required');
}
if ($("select[id=option_35] option:selected").text()=='In The Header Bar') {
$('#option_div_38').show();
$('#option_32').val('');
$('#option_33').val('');
$('#option_37').val('');
$('#option_34').val('');
$('#option_36').val('');
$('#option_32').removeClass('required');
$('#option_33').removeClass('required');
$('#option_34').removeClass('required');
$('#option_36').removeClass('required');
$('#option_37').removeClass('required');
$('#option_38').addClass('required');
}
if ($("select[id=option_35] option:selected").text()=='Right Hand Side & Above Header Bar') {
$('#option_div_33').show();
$('#option_div_34').show();
$('#option_32').val('');
$('#option_37').val('');
$('#option_38').val('');
$('#option_36').val('');
$('#option_32').removeClass('required');
$('#option_33').addClass('required');
$('#option_34').addClass('required');
$('#option_36').removeClass('required');
$('#option_37').removeClass('required');
$('#option_38').removeClass('required');
}
$('#font_color_info').hide();
clearTimeout(fade_timer);
$('#font_color_info').html('<img src="{$STORE_URL}/images/font_color/'+$("select[id=option_35] option:selected").text()+'.png" />');
$('#font_color_info').show();
fade_timer = setTimeout(function(){ $('#font_color_info').fadeOut(200); },10000);
} else {
//console.log ('false '+$(this).val());
$('#option_div_32').hide();
$('#option_div_36').hide();
$('#option_div_37').hide();
$('#option_div_38').hide();
$('#option_div_33').hide();
$('#option_div_34').hide();
}
});
$(document).ready(function(){
$('#have_embrodery').prop('selectedIndex',0);
$('.lets_change_the_price').prop('selectedIndex',0);
$('.prev_input').val('0');
$('#prev_mult').val('1');
$('#option_price').prop('selectedIndex',0);
$('#option_div_18').hide();
$('#option_div_19').hide();
$('#option_div_32').hide();
$('#option_div_36').hide();
$('#option_div_37').hide();
$('#option_div_38').hide();
$('#option_div_33').hide();
$('#option_div_34').hide();
$('#option_div_35').hide();
});
答案 0 :(得分:0)
调试你的代码的方法
在您的代码之间添加此元标记它将强制关闭兼容性视图。公平的警告,这是一种黑客攻击。
按照图片
试试这个通常可以和你一起工作