2

2 つのドロップダウンがあるテーブルがあります。最初のドロップダウンから値を選択すると、2 番目のドロップダウンの値が表示されます。

このため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");

機能の別の部分のようです。2 番目のドロップダウンのオプションを表示/非表示にするコードが機能していません。現在、すべてのオプションが表示されています。

これで私を助けてくれませんか。

さらにコードが必要な場合はお知らせください。

4

3 に答える 3

4

visibility: collapseIE<8では実装されていません

display: noneテーブル要素を非表示にするために使用します。

こちらをご覧ください：可視性の代替：IEと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をまとめるのはクールでしょう。

于 2012-12-10T13:03:43.490 に答える
4

Internet Explorer のバージョン (IE8 を含む) は、プロパティ値の "inherit" または "collapse" をサポートしていません。

display:none;代わりに使用してください。

例えば：

rows.filter('.rangeTR').css("display", "none");
于 2012-12-10T13:05:41.190 に答える
2

visibility: collapseIEでも使えるようです。私はそれを使用しており、IE と Firefox の両方で動作しています。この 2 つ以外のブラウザについては知りません。

私は次のことをしました：

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

これはうまくいくはずです！

私の質問に関しては、コードの 2 番目の部分が間違っていると思います。それを確認する必要があります。

于 2012-12-10T13:29:58.243 に答える