下拉不仅适用于IE 8或9

时间:2014-04-11 19:27:39

标签: javascript php html internet-explorer-8 internet-explorer-9

我在下面提供的页面中为我的产品提供了多种产品选项,在所有现代浏览器中,下拉菜单工作正常,包括一旦您更改了某些选项而自动更改价格但是在IE8和9上,下拉列表根本不起作用,不会出现其他选项。

我意识到的一个奇怪的解决方法是,如果我将所有javascript包含在页面底部的<!-- -->标签(如下所示),则下拉列表工作但价格自动更新(再次在IE8上) / IE9)不起作用,所以不能只依靠它来切换它。

下面有相当多的代码,我不想错过任何内容,所以我已经把它全部包括在内,但是我不想让我看起来像是在扔所有代码并询问,这里帮助我。这是(关于javascript)与这些选项下拉和价格的关系。

实时网页:http://bit.ly/1hyQzm0

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();
    });

1 个答案:

答案 0 :(得分:0)

调试你的代码的方法

  1. 按F12打开开发人员工具,然后在脚本选项卡上按“开始调试”,然后重新运行代码。有什么错误吗? IE喜欢默默地失败,除非你告诉它你想知道。
  2. 在您的代码之间添加此元标记它将强制关闭兼容性视图。公平的警告,这是一种黑客攻击。

  3. 按照图片Drop Down Problem Solved

  4. 中的以下步骤操作

    试试这个通常可以和你一起工作