Drop down list change function not working in IE9

Question

I have two dropdowns, the second dropdown shall change when something is changed in the first dropdown, this is working fine in Firefox, but not in IE. (IE9). Then in the second dropdown, I'm looping through the items, and hiding some of them.

var intermin = '${intermin}'; 
var intermin2=intermin.substring(1,3);

$('#startSemester').change(function() {

    var start=$('#startSemester').val();
    var end=$('#endSemester').val();
    var start1=start.substring(0,1);
    var start2=start.substring(1,3);
    var start3="";
    var end3="";
    if (start1=="H"){
        start3="2";
    }
    else
        start3="1";
    var start4=start2+start3;

    $('#endSemester option').removeAttr("disabled");
    var endSemesters= $('#endSemester');

        $.each($('option', endSemesters), function(index, value) { 
            var end= ($(this).val());
            var end2=end.substring(1,3);
            var end1=end.substring(0,1);
            if (end1=="H"){
                end3="2";
            }
            else
                end3="1";
            var end4=end2+end3;
            $('#endSemester ' + 'option' + '[value =' + end + ']').show();  
            if (end4 < start4 || end2 > intermin2) {
                $('#endSemester ' + 'option' + '[value =' + end + ']').hide();
            }
        });
});

Is there some way of having this working in IE.

Answer 1

The problem with IE is the hiding option part. IE doesn't support much CSS on option elements. Especially display: none which is what .hide() does.

Therefor I believe it's best for you to disable the option.

var changeOption = $('#endSemester ' + 'option' + '[value=' + end + ']');

changeOption.prop("disabled", false);
if (parseInt(end4) < parseInt(start4) || parseInt(end2) > parseInt(intermin2)) {
    changeOption.prop("disabled", true);
}

You can test this in various browsers: http://jsfiddle.net/tive/wU6XL/

Or if you're persistent enough find a plugin that:

• hides the select control and uses a replacement ul li structure
• wraps <option /> with a span ( demo1 demo2 )

PS: you might want to change the option values accordingly since I have no view on your HTML.

Answer 2

Hey Please refer This code

<asp:DropDownList ID="ddlWeeklyWeightIn" runat="server" ClientIDMode="Predictable">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
        </asp:DropDownList>

Js Code Is

$('#ddlWeeklyWeightIn').on("change", function () {
            alert($(this).val());
        });

Please refer Link See Demo

Hope it helps you.