CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Adrian
Adrian

Reputation: 1002

jQuery code of Select list in IE not working

I have problem with select list in IE (all version). I got two field with directions who depends of City1 and City2 fields. When I pick the City from City1 in direction field should display only 4 directions. Similarly, in the City2 field. Everything working fine in Firefox, Chrom, Opera, but no in IE - I see the whole list of directions.

in my opinion - something is wrong with this code, but i don't know what:

    if (parseInt($("#finish_day").val()) < 4) {
        $('#return_car').children('#return_car option[value=' + $('#get_car').val() + ']').attr('selected', 'selected').siblings().attr('disabled', true);
        if ($('#return_car').val()) $('#return_car').change();
    } else {
        $('#get_car > option, #return_car > option').prop('disabled', false);
        });
    }

The working code is here: http://jsfiddle.net/utXMD/

Thanks in advice for any help.

Upvotes: 1

Views: 219

Answers (2)

Marcelo De Zen
Marcelo De Zen

Reputation: 9497

Option elements in IE only support a few css properties, like color and background-color, font-* properties, display, text-* are not supported in IE9 (maybe in IE10?). As you're using display:none to hide the options, nothing happens.

The solution is add only the directions for the current city. Example:

$(function() {
    var directions =  {
          "city1": ["direction1", "direction2" ],
          "city2": ["direction3", "direction4" ]
       };

    $("#scity").change(function() {  
        var cityDirections = directions[$(this).val()];
        var $directions = $("#citydirections");
        $directions.children().remove();

        for(var i = 0; i < cityDirections.length; i++)
           $directions.append("<option value='" + cityDirections[i] + "'>" + cityDirections[i] + "</option>");
    });
});

http://jsfiddle.net/8t7J6/4/

Upvotes: 0

Gabriel
Gabriel

Reputation: 407

Delete the commas after the last values in $.viewMap_get and $.viewMap_return objects:

$.viewMap_get = {
        '0' : $([]),
        'Katowice' : $('#c1a, #c1b, #c6, #c7'),
        'Kraków' : $('#c2a, #c2b, #c6, #c7'),
        'Warszawa' : $('#c3a, #c3b, #c6, #c7'),
        'Wrocław' : $('#c4a, #c4b, #c6, #c7'),
        'Gdańsk' : $('#c5a, #c5b, #c6, #c7')
    };



$.viewMap_return = {
        '0' : $([]),
        'Katowice' : $('#d1a, #d1b, #d7'),
        'Kraków' : $('#d2a, #d2b, #d7'),
        'Warszawa' : $('#d3a, #d3b, #d7'),
        'Wrocław' : $('#d4a, #d4b,, #d7'),
        'Gdańsk' : $('#d5a, #d5b, #d7')
    };

IE7 and IE8 have issues with JS objects values which ends with a trailing ','.

UPDATE:

Try the following code:

$(function() {

    $( "#date_from, #date_to" ).datepicker({
        defaultDate: "+1d",
        minDate: "+1d",
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
        monthNamesShort: ["Sty","Lut","Mar","Kwi","Maj","Cze","Lip","Sie","Wrz","Paz","Lis","Gru"],
        dayNamesMin: ["Nie", "Pon", "Wt", "Sr", "Czw", "Pt", "Sob"],
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            if(this.id == 'date_from'){
              var dateMin = $('#date_from').datepicker("getDate");
              var dateMax = $('#date_to').datepicker('getDate');
              var rent_date_from = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); 
              var rent_date_to = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 29); 
              $('#date_to').datepicker("option","minDate",rent_date_from);
              $('#date_to').datepicker("option","maxDate",rent_date_to);      
            }
            compute(); //Add compute
        }

    }); 

    $.viewMap_get = {
        '0' : $([]),
        'Katowice' : $('#c1a, #c1b, #c6, #c7'),
        'Kraków' : $('#c2a, #c2b, #c6, #c7'),
        'Warszawa' : $('#c3a, #c3b, #c6, #c7'),
        'Wroclaw' : $('#c4a, #c4b, #c6, #c7'),
        'Gdansk' : $('#c5a, #c5b, #c6, #c7')
    };

    $.each($.viewMap_get, function() { $(this).remove(); });
    $('#get_city_district').hide();

    $('#get_car').on('change', function() {
        // hide all
        $.each($.viewMap_get, function() { $(this).remove(); });
        $('#get_city_district').hide();
        // show current
        $('#get_city_district').append($.viewMap_get[$(this).val()]).show();

        var id = $.viewMap_get[$(this).val()].attr("id");   
        $('#'+id).attr('selected', 'selected');
    });

    $.viewMap_return = {
        '0' : $([]),
        'Katowice' : $('#d1a, #d1b, #d7'),
        'Kraków' : $('#d2a, #d2b, #d7'),
        'Warszawa' : $('#d3a, #d3b, #d7'),
        'Wroclaw' : $('#d4a, #d4b,, #d7'),
        'Gdansk' : $('#d5a, #d5b, #d7')
    };

    $.each($.viewMap_return, function() { $(this).remove(); });
    $('#return_city_district').hide();

    $('#return_car').on('change', function() {

        $.each($.viewMap_return, function() { $(this).remove(); });
        $('#return_city_district').hide();
        // show current
        $.viewMap_return[$(this).val()].show();
        $('#return_city_district').append($.viewMap_return[$(this).val()]).show();

        var id = $.viewMap_return[$(this).val()].attr("id");
        $('#'+id).attr('selected', 'selected');
    });

    function compute() {
        var c = $('select#time_from_hour').val();
        var d = $('select#time_from_minute').val();
        var e = $('select#time_to_hour').val();
        var f = $('select#time_to_minute').val();
        var g = $('input#date_from').val();
        var h = $('input#date_to').val();
        date1= g.split("/");
        var timestamp = (new Date(date1[2],date1[1],date1[0],c,d).getTime()/1000) + 7200;
        $('#total_hour1').val(timestamp);

        date2= h.split("/");
        var timestamp = (new Date(date2[2],date2[1],date2[0],e,f).getTime()/1000) + 7200;
        $('#total_hour2').val(timestamp);

        var x = -$('input#total_hour1').val();
        var y = -$('input#total_hour2').val();
        var total_time = x - y;
        result = total_time / 86400;
        new_number = Math.ceil(result);

        if(isNaN(new_number)) {
          var new_number = 0;
        }
        $('#finish_day').val(new_number);

        if( parseInt($("#finish_day").val()) < 4 ) {   
            $('#return_car').children('#return_car option[value=' + $('#get_car').val() + ']').attr('selected', true).siblings().attr('disabled', true);

            if ($('#return_car').val()) $('#return_car').change();
        }
        else {
            $('#get_car > option, #return_car > option').prop('disabled', false);
            $('#three_day').hide(2000, function () {
                $(this).remove();
            });
        }

    }


    $('select#time_from_hour').change(compute);
    $('select#time_from_minute').change(compute);
    $('select#time_to_hour').change(compute);
    $('select#time_to_minute').change(compute);
    // $('select#return_car').change(compute);
    $('select#get_car').change(compute);
    $('input#finish_day').change(compute); 

});

Upvotes: 1

Related Questions