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.

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.

• javascript
• jquery
• html
• internet-explorer
• css

• Have you tried display: table-row-group? – user1326628 Commented Dec 10, 2012 at 13:00
• no.. can you please elaborate it a little? – DarkKnightFan Commented Dec 10, 2012 at 13:01
• No versions of Internet Explorer (including IE8) support the property values "inherit" or "collapse". – dsgriffin Commented Dec 10, 2012 at 13:01
• Is there any alternative to "collapse" then for IE? I am using collapse since I dont want to show reserved space for the rows which are hidden. Looks ugly. – DarkKnightFan Commented Dec 10, 2012 at 13:03
• Dup: IE8 - CSS visibility: collapse - Doesn't work? – SDC Commented Dec 10, 2012 at 13:12

3 Answers 3

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");

visibility: collapse is not implemented in IE<8

Use display: none to hide the table elements.

see here : Alternative to visibility:collapse not working on IE and Chrome

and here : http://reference.sitepoint./css/visibility

Also check the code below :

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

maybe try adding quotes (wild guess, no real hope):

$("#validationType option[value='" + validationTypes[i].value + "']")

What version of jQuery are you using?

It would be cool to put together a jsFiddle for us.

Well it seems visibility: collapse can be used in IE as well. I am using it and it is working in both IE and Firefox. Dont know about other browsers apart from these two.

I have done the following:

HTML:

<table class="intValidationTable">

`<tr class="rangeTR" style="visibility: collapse;">`

`<tr class="listTR" style="visibility: collapse;">`

Javascript + Jquery:

var rows = $('table.intValidationTable tr');

var rangeTR = rows.filter('.rangeTR');

var listTR = rows.filter('.listTR');

rangeTR.css("visibility", "visible");

listTR.css("visibility", "collapse");

This should work!

Regarding my question, I guess the second part of the code is erroneous. Need to check that.