Question

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

为此，我编写了以下函数，该函数在第一个下拉列表的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");

似乎是该功能的另一部分。显示/隐藏第二个下拉列表选项的代码无效。目前正在显示所有选项。

你们能帮助我吗？

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

Answer 1

IE＆lt; 8

中未实现

visibility: collapse

使用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会很酷。

Answer 2

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

改为使用display:none;。

例如：

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

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

这应该有效！

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

jquery：.filter（）。css（“visibility”，“collapse”）无法在IE中工作，在FF工作正常

3 个答案: