Select のジャンプテーブルとしての使用例






HTML の要素 SELECT は、<FORM> 〜 </FORM> の間に記述され、CGIの1つの仕掛けとして利用されます。
しかし、ここにJavaScript を利用すると、あたかもジャンプテーブルのようにも利用できます。




簡単なサンプル
 
サンプルの実行例
下のようなリストボックスを見たことありますよね。
その中の、どれかを選択するとリンク先にジャンプする仕掛けです。
下のリストボックスは、例なのでジャンプ先がありませんが、ジャンプ先があれば正常に動作するものです。

サンプルのHTML
上記のような仕掛けは、JavaScript とHTMLの要素 Select で下記のようにして作成します。
要所を強調するため短く記述しています。

    <html>
    <head>
    <title>テスト</title>
    <script language="JavaScript1.1">
    <!--
    function SelectJumpTbl(sel)
    {
        url = sel.options[sel.selectedIndex].value;
        location.href = url;
    }

    // -->
    </script>
    </head>

    <body>
    <form>
    <select onchange="SelectJumpTbl(this)">
    <option selected>=== テスト ===</option>
    <option value="entry.htm"> entry </option>
    <option value="login.htm"> login </option>
    </select>
    </form>

    </body>
    </html>