jQuery works fine in chrome fails in IE9/IE8 etc

Question

I'm using the following jquery (theres a lot of it, sorry) to load in a dynamic dropdown and to update when one of them changes. In IE it loads the dropdowns at the start, but doesn't seem to fire on the onchange events (even in IE9)

Any help will really be appreciated

<script type="text/javascript">
    $(document).ready(function() {

        <%= loadValues%>
        $('.dropone').change(function() {
            var tmpRoomID = $('.drpChg1').val();
            $(".drpChg2").empty();
            $(".drpChg2").load("ajaxdropdown.aspx?drpType=room&roomid=" + tmpRoomID, function() {
                updateTB()
            });
        });

        $('.droptwo').change(function() {
            updateTB()
        });

        $('.dropfive').change(function() {
            updateTB()
        });

        $('.dropfour').change(function() {
            updateTB()
        });

        $('.dropthree').change(function() {
            var tmpRoomID = $('.drpChg3').val();
            $(".drpChg4").empty();
            $(".drpChg4").load("ajaxdropdown.aspx?drpType=cat&catID=" + tmpRoomID, function() {
                updateTB()
            });
            $(".drpChg5").load("ajaxdropdown.aspx?drpType=subcat&subcatID=" + tmpRoomID, function() {
                updateTB()
            });

        });

        function updateTB() {
            $('#drop1').val($(".drpChg1").val());
            $('#drop2').val($(".drpChg2").val());
            $('#drop3').val($(".drpChg3").val());
            $('#drop4').val($(".drpChg4").val());
            $('#drop5').val($(".drpChg5").val());
        }

        function loadValues() {
            var roomID = "0"
            $('.dropone').load('ajaxdropdown.aspx', function() {
                $('#drop1').val($(".drpChg1").val());
            });
            $('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID + '', function() {
                $('#drop2').val($(".drpChg2").val());
            });

            $('.dropthree').load('ajaxdropdown.aspx?drpType=type' + '', function() {
                $('#drop3').val($(".drpChg3").val());
            });

            $('.dropfour').load('ajaxdropdown.aspx?drpType=cat&catID=' + roomID + '', function() {
                $('#drop4').val($(".drpChg4").val());
            });

            $('.dropfive').load('ajaxdropdown.aspx?drpType=subcat&subcatID=' + roomID + '', function() {
                $('#drop5').val($(".drpChg5").val());
            });

        }

            function loadNewValues() {
            var roomID = "0"
            $('.dropone').load('ajaxdropdown.aspx', function() {
                $('.drpChg1').val($("#drop1").val());   
            });

            $('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID + '', function() {
                $('.drpChg2').val($("#drop2").val());  
            });

            $('.dropthree').load('ajaxdropdown.aspx?drpType=type' + '', function() {
                $('.drpChg3').val($("#drop3").val());  
            });

            $('.dropfour').load('ajaxdropdown.aspx?drpType=cat&catID=' + roomID + '', function() {
                $('.drpChg4').val($("#drop4").val());  
            });

            $('.dropfive').load('ajaxdropdown.aspx?drpType=subcat&subcatID=' + roomID + '', function() {
               $('.drpChg5').val($("#drop5").val());  
            }); 
       }


    });
</script>

Answer 1

Try out those links you refer to as normal links. Sometimes there's a confusion between browsers needing a link to:

• Somefile.asp?blah=yaddah
• /Somefile.asp?blah=yaddah
• ./Somefile.asp?blah=yaddah

I see this with CSS sometimes.