jquery: .filter().css("visibility", "collapse") 在 IE 中不工作，在 FF 中工作正常答案

【问题标题】：jquery: .filter().css("visibility", "collapse") not working in IE, working in FF finejquery: .filter().css("visibility", "collapse") 在 IE 中不工作，在 FF 中工作正常
【发布时间】：2012-11-27 21:29:42
【问题描述】：

我有一个表格，里面有两个下拉菜单。从第一个下拉列表中选择一个值时，将显示第二个下拉列表的值。

为此，我编写了以下函数，该函数在第一个下拉列表的 onchange 事件中被调用：

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();
    }
}
}

此功能在 Firefox 中运行良好。但不知何故，它在 IE 8.0 中不起作用。

编辑： 早些时候，我认为这可能是它的原因。但事实并非如此。

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

似乎是函数的另一部分。显示/隐藏第二个下拉选项的代码不起作用。当前正在显示所有选项。

你们能帮我解决这个问题吗？

如果需要更多代码，请告诉我。

【问题讨论】：

你试过 display: table-row-group 吗？
no.. 你能详细说明一下吗？
没有任何版本的 Internet Explorer（包括 IE8）支持属性值“继承”或“折叠”。
对于 IE，还有什么可以替代“折叠”的吗？我正在使用collapse，因为我不想为隐藏的行显示保留空间。看起来很丑。
@DarkKnightFan 是的，检查我的答案

标签： javascript jquery html internet-explorer css

【解决方案1】：

没有任何版本的 Internet Explorer（包括 IE8）支持该属性值“继承”或“折叠”。

请改用display:none;。

例如：

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

【讨论】：

我似乎对visibility: collapse 没有任何问题。根据第二个下拉菜单的值动态隐藏/显示行！
@DarkKnightFan 这不是他们的问题，只是他们在 IE 中不受支持。如果您希望所有浏览器都支持您的功能，请使用 display:none;，如果只有 firefox/chrome，则使用 visibility:collapse :)
@DarkKnightFan 如果它在 IE 中工作，那么你做了什么改变使它工作？
我创建了 rows<tr class="dateRangeTR" style="visibility: collapse;"> 并根据第二个下拉列表的值执行此操作：dateRangeTR.css("visibility", "visible"); 或 dateRangeTR.css("visibility", "collapse"); 作为 TOGGLE
这会在 IE 和 FF 中显示/隐藏所需的行。所以我想我的实际问题出在函数的第二部分，我需要再次检查。填充（隐藏/显示）第二个下拉菜单选项的代码。

【解决方案2】：

visibility: collapse在IE中没有实现

使用display: none 隐藏表格元素。

请看这里：Alternative to visibility:collapse not working on IE and Chrome

这里：http://reference.sitepoint.com/css/visibility

同时检查下面的代码：

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

也许可以尝试添加引号（疯狂猜测，没有真正的希望）：

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

你使用的是什么版本的 jQuery？

为我们组装一个 jsFiddle 会很酷。

【讨论】：

我似乎对visibility: collapse 没有任何问题。根据第二个下拉菜单的值动态隐藏/显示行！
已编辑答案。您的“选项”标签可能不会被选中
是的，我也认为代码是导致此问题的原因。我正在使用 jquery 1.7.2
什么版本的 IE 有问题？
到现在我只签入了IE8

【解决方案3】：

看来visibility: collapse 也可以在IE 中使用。我正在使用它，它可以在 IE 和 Firefox 中运行。不知道除了这两个之外的其他浏览器。

我做了以下事情：

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

这应该可行！

关于我的问题，我猜代码的第二部分是错误的。需要检查一下。

【讨论】：