イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.26 - リンク先をプルダウンメニューで選択する その２
|
ホームページの項目やおすすめリンク集も次第に大きくなっていきます。プルダウンメニューに目次やリンク集を詰め込めば、ホームページもコンパクトになります。 |
| Step テーマ ● コンボボックス操作 ● onchange イベント |
実行例 |
リスト<script type="text/javascript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --></script> <form name="myForm"> <select name="myMenu" onchange="myGo()"> <option value="index.htm" >☆☆ イヌでもわかるJavaScript講座 目次 ☆☆ <option value="hajimeni.htm">はじめに <option value="step1.htm" >Step.1 いきなりJavaScriptを使ってみましょう <option value="aisatu.htm" >Step.2 あいさつ文を表示してみましょう <option value="getdate.htm" >Step.3 現在の日付と時間を表示してみましょう </select> </form> |
| サンプルだけの HTMLは こちらへ |
説明前回はプルダウンメニューからリンク先を選んで[GO]ボタンでリンクしました。 今回はプルダウンメニューから項目を選択するだけでリンクするようにします。 <SELECT>タグに onchange を指定すると 項目選択時に 指定の処理を行います。 <select name="myMenu" onchange="myGo()"> このため、前回の [GO!] ボタンは 必要なくなります。 onclick はクリックされた時、onchange は項目に変更があった時に処理をするというものです。 これらを イベント処理 といいます。この辺は後のステップで説明します。 参考ステップ Step.25 プルダウンメニューを使って目次を作りましょう その１ Step.55 プルダウンメニューを使って目次を作りましょう（フレーム版） |
 |