| ポイント |
<![CDATA[
n = selOBJ.selectedIndex;
if (oldNo == -1) document.all["tbl0"].style.visibility = "hidden";
oldNo = n; // 選択番号を保持しておく
if (n == 0) return; // 0の場合は何もしない
for (i=1; i<=3; i++) document.all["tbl"+i].style.visibility = "hidden";
document.all["tbl"+n].style.visibility = "visible";
]]>
|
| 説 明 |
選択された番号に応じて表示する表を変えるには表にid属性で名前を指定、スタイルシートでvisibilityを指定しておきます。最初に１つ表を表示させておくために別にスタイルを指定しておきます。セレクトメニューで選択された番号に応じて表のスタイルプロパティであるvisibilityに"visible"を入れれば選択された番号の表が表示されます。ただし、セレクトメニューの一番最初の項目が選択された場合には以前の表を表示したままにするため、以前に選択されたセレクトメニューの番号を変数に入れておきチェックします。サンプルでは-1では最初の表が表示されている状態なので以前の番号が-1であれば最初の表を非表示にします。今回選択された項目番号が0であれば一番最初の項目が選択された事になるため何も処理しないようにreturnで関数から抜けます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>セレクトメニューで選択された表を表示する（最初から表が表示）</title>
<style type="text/css"><!--
.tbl0 { position:absolute;top:80px;visibility:visible;border:4px blue dotted; }
.tbl { position:absolute;top:80px;visibility:hidden;border:4px blue dashed; }
--></style>
<script Language="JavaScript"><!--
oldNo = -1;
function setTable(selOBJ)
{
n = selOBJ.selectedIndex;
if (oldNo == -1) document.all["tbl0"].style.visibility = "hidden";
oldNo = n; // 選択番号を保持しておく
if (n == 0) return; // 0の場合は何もしない
for (i=1; i<=3; i++) document.all["tbl"+i].style.visibility = "hidden";
document.all["tbl"+n].style.visibility = "visible";
}
// --></script>
</head>
<body>
<form>
<select onChange="setTable(this)">
<option>選択してください</option>
<option>表１</option>
<option>表２</option>
<option>表３</option>
</select>
</form>
<table id="tbl0" class="tbl0"><tr><th>最初の表</th></tr></table>
<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!
|
セレクトメニューで選択された表を表示する（最初から表が表示）