21.プルダウンリスト
 
 プルダウンリストにあるいくつかの項目の中から1つを選択すると自動的にそのページにジャンプします。

<HTML>
<TITLE>PullList</TITLE>
<SCRIPT language="JavaScript">
<!--
function change(){num=document.form.select.selectedIndex; //(1)
if(num==0)location.href="#"; //(2)
else if(num==1)location.href="01.htm";
else if(num==2)location.href="02.htm";
else if(num==3)location.href="03.htm";
else if(num==4)location.href="04.htm";
else if(num==5)location.href="05.htm";
else if(num==6)location.href="06.htm";
else if(num==7)location.href="07.htm";
else if(num==8)location.href="08.htm";
else if(num==9)location.href="09.htm";
else if(num==10)location.href="10.htm";
else if(num==11)location.href="11.htm";
else if(num==12)location.href="12.htm";
else if(num==13)location.href="13.htm";
else if(num==14)location.href="14.htm";
else if(num==15)location.href="15.htm";
else if(num==16)location.href="16.htm";
else if(num==17)location.href="17.htm";
else if(num==18)location.href="18.htm";
else if(num==19)location.href="19.htm";
else location.href="20.htm";
}
//-->
</SCRIPT>
<BODY>
<FORM name="form">
<SELECT name="select" onChange="change()">
<OPTION SELECTED>ここからお選びください //(3)…num==0に対応
<OPTION>1.文字の点滅(ネットスケープのみ) //(3)…num==1に対応
<OPTION>2.最終更新日を表示 //(3)…num==2に対応
<OPTION>3.現在の時刻を表示 //(3)…num==3に対応
<OPTION>4.時刻によってメッセージを変える //(3)…num==4に対応
<OPTION>5.カウントダウン //(3)…num==5に対応
<OPTION>6.曜日によって画像を変える //(3)…num==6に対応
<OPTION>7.画像を一定時間で切り替える //(3)…num==7に対応
<OPTION>8.一定時間後にほかのページにジャンプする //(3)…num==8に対応
<OPTION>9.リアルタイム時計 //(3)…num==9に対応
<OPTION>10.フォームにメッセージをスクロールさせる(type1) //(3)…num==10に対応
<OPTION>11.フォームにメッセージをスクロールさせる(type2) //(3)…num==11に対応
<OPTION>12.フォームにメッセージをスクロールさせる(type3) //(3)…num==12に対応
<OPTION>13.ステータスバーにメッセージをスクロールさせる(type1) //(3)…num==13に対応
<OPTION>14.ステータスバーにメッセージをスクロールさせる(type2) //(3)…num==14に対応
<OPTION>15.ステータスバーにメッセージをスクロールさせる(type3) //(3)…num==15に対応
<OPTION>16.リンクにふれると同時にフォームにメッセージを表示させる //(3)…num==16に対応
<OPTION>17.ブラウザごとにそれぞれのページにジャンプさせる //(3)…num==17に対応
<OPTION>18.外部ファイルを使ったパスワード(フォーム編) //(3)…num==18に対応
<OPTION>19.外部ファイルを使ったパスワード(プロンプト編) //(3)…num==19に対応
<OPTION>20.乱数を使う(リンク、画像の切り替え、背景の切り替え) //(3)…num==20に対応
</SELECT>
</FORM>
</BODY>
</HTML>

(説明)
 (1)の「function change(){num=document.form.select.selectedIndex;」ではプルダウンリストの一覧から1つを選択するとfunctionのchange関数が呼び出され、(2)以降の変数numに与えられたリンク先にジャンプします。リンクをつけない場合は「#」(シャープ)を書きます。こうすることによりそのメニューを選んだ場合そのリンクを無効にできます。(3)の「OPTION」にはリンクの名前を指定しますが、注意するのは(2)にあるように変数numは上から順に0,1,2,3,…と数字が振られるので、「OPTION」も同様に上から順に0,1,2,3,…となります。

実行結果

BACK