| ポイント |
<![CDATA[
for (i=1; i<=3; i++)
{
if (document.all) document.all["tbl"+i].style.visibility = "hidden";
if (document.layers) document.layers["tbl"+i].visibility = "hidden";
}
n = selOBJ.selectedIndex + 1;
if (document.all) document.all["tbl"+n].style.visibility = "visible";
if (document.layers) document.layers["tbl"+n].visibility = "visible";
]]>
|
| 説 明 |
選択された番号に応じて表示する表を変えるには表にid属性で名前を指定、スタイルシートでvisibilityを指定しておきます。NN4の場合はposition:absolute;の指定も必要です。選択された番号に応じて表のスタイルプロパティであるvisibilityに"visible"を入れれば選択された番号の表が表示されます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>セレクトメニューで選択された表を表示する</title>
<style type="text/css"><!--
.tbl { position:absolute;top:80px;visibility:hidden;border:4px blue dashed; }
--></style>
<script Language="JavaScript"><!--
function setTable(selOBJ)
{
for (i=1; i<=3; i++)
{
if (document.all) document.all["tbl"+i].style.visibility = "hidden";
if (document.layers) document.layers["tbl"+i].visibility = "hidden";
}
n = selOBJ.selectedIndex + 1;
if (document.all) document.all["tbl"+n].style.visibility = "visible";
if (document.layers) document.layers["tbl"+n].visibility = "visible";
}
// --></script>
</head>
<body>
<form>
<select onChange="setTable(this)">
<option>表１
<option>表２
<option>表３
</select>
</form>
<table id="tbl1" class="tbl"><tr><th>表１</th></tr></table>
<table id="tbl2" class="tbl"><tr><th>表２</th></tr></table>
<table id="tbl3" class="tbl"><tr><th>表３</th></tr></table>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
セレクトメニューで選択された表を表示する