Question

I have a table where in there are two dropdowns.
On selecting a value from the first dropdown, the values of the second dropdown are displayed.

For this I have written the following function which gets invoked on the onchange event of the first dropdown:

function dataTypeChanged(selectedValue){

document.getElementById("nodeInputValidation").innerHTML = "";
var rows = $('table.intValidationTable tr');
rows.filter('.rangeTR').css("visibility", "collapse");
rows.filter('.listTR').css("visibility", "collapse");
rows.filter('.textListTR').css("visibility", "collapse");
rows.filter('.dateRangeTR').css("visibility", "collapse");
rows.filter('.dateListTR').css("visibility", "collapse");

var validationTypes = document.getElementById("validationType").options;
document.getElementById("validationType").value = "";
var datatype;
for(var i=0;i<validationTypes.length;i++)
{
    datatype = validationTypes[i].value.substring(0,validationTypes[i].value.indexOf("_"));

    if(datatype != selectedValue){
        $("#validationType option[value=" + validationTypes[i].value + "]").hide();
    }else{
        $("#validationType option[value=" + validationTypes[i].value + "]").show();
    }
}
}

This function works perfectly fine in Firefox.
But somehow it doesn’t work in IE 8.0.

EDIT:
Earlier I thought this might be the cause of it. But its not.

var rows = $('table.intValidationTable tr');
rows.filter('.rangeTR').css("visibility", "collapse");
rows.filter('.listTR').css("visibility", "collapse");
rows.filter('.textListTR').css("visibility", "collapse");
rows.filter('.dateRangeTR').css("visibility", "collapse");
rows.filter('.dateListTR').css("visibility", "collapse");

Seems to be the other part of the function. Code that shows/hides options of the second dropdown is not working. All the options are getting displayed currently.

Can you guys help me with this.

Let me know if more code is required.

Answer 1

No versions of Internet Explorer (including IE8) support the property
values “inherit” or “collapse”.

Use display:none; instead.

For example:

rows.filter('.rangeTR').css("display", "none");