jQuery not working in IE

Question

I have code that works fine in FF but not in IE. Certain values are hidden in the second drop down depending on the value of the first drop down selected. The values are hidden correctly in FF, but everything is displayed in IE:

function updateMountingMethod() {
    var selectedVal = $('#attrib-13 option:selected').text().split(" ")[0];
    $.each($("#attrib-7").children(), function() {
        var optionText = $(this).text();
        var values = optionText.split('|')[1];
        if (values != undefined) {
            if (values.substring(1, 3) != selectedVal) {
                $(this).css('display', 'none');
            }
            else {
                $(this).text($(this).text().split("|")[0] + $(this).text().split("|")[2]);
            }
        }
    })
}

If this isnt completely clear here is a better description.

I have a jQuery code that is called every time a drop down value is changed. When the value is changed it gets the size of the selected element. The values displayed look like 11 ft, 15 ft, 19 ft, so i split it to just get the number and not the ft. Depending on the value selected it needs to update the next drop down menu which follows this format:

Item 1 | 11'11" |
Item 2 | 15'9"  |
Item 3 | 19'9"  |
...

I don't want the stuff between the | | | | to show, it is just there to match up each item with the selected length (ie 11 ft option in the first drop down is selected, then only the 11'11" option is displayed in the second drop down). Can anyone tell me why these extra values are not being hidden in IE?

Answer 1

The first thing I do in this situation is to Validate the HTML against W3C; things often aren't working in IE because the HTML isn't 100% compliant. See http://hogsmill.wordpress.com/info/ for some gotchas I've found