form / select / optionタグ & JavaScript セレクトメニュー／プルダウンメニュー

form / select / optionタグ & JavaScript セレクトメニュー／プルダウンメニュー

クリックしたらメニューが表示されるようにしたい『セレクトボックス編』

　上記リンク先ではフォームタグのselectタグ内でセレクトボックスのつくり方について触れました。

　今回はこのセレクトボックスで選択されたメニュー(セレクトメニュー・プルダウンメニュー)に応じて他のページに移動できるようにしてみましょう。

　これにはJavaScriptを使用します。

　それでは早速セレクトボックスのおさらいから。

<form>     <select>         <option>～</option>         <option>～</option>         <option>～</option>     </select>   </form>

のようにoption終了タグは省略しても良いタグですけど省略しない場合は、このように記述するんでしたよね。

　今回JavaScriptは外部ファイルにしたいと思いますので、このフォームタグとSELECTタグに特定の名前をつけてJavaScriptファイルから参照できるようにしてみましょう。

<form name="pull_down_form">     <select name="pull_down_menu">         <option>～</option>         <option>～</option>         <option>～</option>     </select>   </form>

　このようにHTMLタグに名前を付けるにはname属性(、または、id属性、XHTMLタグではname属性ではなくid属性)を使うんでしたよね。

　そして次は、セレクトタグに『イベント』を割り当てます。

　『イベント』？と思われた方も多いでしょう。

　『イベント』とはプログラムやスクリプトでは「何かが起こる」ということを意味しています。

　例えば、あなたが道を歩いていて交差点があったとします。

　そこには信号があり、今は赤です。

　あなたはどうしますか？

　え？！渡る？！ダメですよ。

　ちゃんと止まりましょう。

　答えは「止まる」ですよね。

「信号が赤の場合」→「止まる」

といったように「何かが起こった場合に対応してある動きをする」事をプログラムの世界では『イベントドリブンプログラミング』といったりしますが、今回の章では「セレクトボックスで選択されたメニューによってそれぞれのページへ移動する」ことになります。

　とはいえ、1時間信号が変わらず、どこをどう見渡しても車もバイクも危険なものも走ってないなんて言ったらそりゃ・・・待ちますよね（えっ！？

　話を戻すと例えば下記は、実際に動作します(あなたがJavaScriptを有効にしていれば)

FORMタグ SELECTタグ

　実はJavaScriptではHTMLファイル内のいくつかのタグにこの「イベント」を割り当てることができます(イベントのタイミング)。

　今回は、SELECTタグにイベントを割り当てます。

　「割り当てる」というのは「タグに属性を設定する」のと同じような感覚でできますのでご安心下さい。

　先ほどの例を使うと

<form name="pull_down_form">     <select name="pull_down_menu" onChange="">         <option>～</option>         <option>～</option>         <option>～</option>     </select>   </form>

そうです、「onChange=""」の部分がイベントの割当ということになります。

(全て小文字でonchangeでも可、XHTMLではむしろ小文字でないとNG)

　この場合は

『セレクトメニューが選択された場合』 「""」内に指定された内容を実行する

ことになります。

　残念ながら文章でではなく、スクリプト・プログラム(主に関数)を記述するのですが文章で書くとここに記述したい内容は

このhtmlファイルの → フォームタグの → セレクトタグのオプション属性の 選択されたメニューがリストの何番目であるか

となります。

　さてここまでを整理しますと

A） プルダウンメニューを作る B） フォームタグとセレクトタグにNAME属性を設定する C） セレクトタグにイベントを割り当てる

までが終わったことになります。

　あとは

D） イベントを記述するJavaScriptの外部ファイルを作成する E） メニューを表示するhtmlファイルで外部ファイルを指定する

だけです。

　新規でテキストエディタを開いて以下を記述またはコピーしてファイル名は、あなたのお好きな名前にして頂いて拡張子を『.js』として保存してください。

◆『あなたのお好きな名前.js』

// プルダウンメニュー選択でリンク先に自動的に移動 function menu_pulldown(menu_pulldownhpurl){  if ( menu_pulldownhpurl != "" ){   if (document.pull_down_form.pull_down_menu.selectedIndex=="1")     { location.href="" ; }   if (document.pull_down_form.pull_down_menu.selectedIndex=="2")     { location.href="" ; }  } }

　[ location.href ]は移動先URL、[ document ]は、(ここでは記述したHTMLファイルの「文書」)実際のURLで以降ドットでつなげている２つは[フォーム名]と[セレクト名( select name="" )]、[ selectedIndex ]は、ゼロから始まる選択肢[0,1,2,･･･]の順番の事です。

　前述のセレクトボックスの選択肢、「(空、カラ)」「FORMタグ」「SELECTタグ」は、[ selectedIndex ]のゼロから始まる選択肢[0,1,2]にそれぞれ該当し、関数[ menu_pulldown(menu_pulldownhpurl) ]の引数(カッコ内)[ menu_pulldownhpurl ]に選択肢[0,1,2,･･･]が入り、関数内で処理を分岐して選択された時の各URLを割り当てています。

　空白の時は何もしません。また、URL部は、当然 http:// からはじまっても大丈夫です。

　そしてプルダウンメニューを表示するhtmlファイルにJavaScriptの外部ファイルを設定し、先のonchange=""に作ったJavaScriptの関数名を設定([onchange="menu_pulldown()"]と)すれば完了です。

　因みにこの外部ファイル『あなたのお好きな名前.js』の内容については、

// プルダウンメニュー選択で～

の『//』はJavaScriptの単一行用のコメントアウト記号です。

function menu_pulldown(menu_pulldownhpurl)   { ～   }

は、プログラムの世界では『関数』とか『ファンクション』と呼ばれており

『 function 』は『値を受け取る事も返すこともできる関数用の定型句』 『 { } 』は(この例では関数の)『始め～終わりをくくる記号』 『 menu_pulldown 』は『関数の名前(あなたのお好きな任意の名前)』 『 (menu_pulldownhpurl) 』は『引数』(あなたのお好きな任意の名前)

という意味になります。

　その他は

『 if ( ) { } 』は『「もし」()内の式が一致したら{}内を実行する』 『 menu_pulldownhpurl 』は『引数』 『 != 』は『等しくない』を意味し『左辺と右辺が一致しない場合』となる 『 == 』は『比較(if等と共に使用し、左辺と右辺が等しければ)』 『 "" 』は『からっぽ』を意味する     『引数がからっぽではない』＝『何か選択されて呼ばれた』 『 location.href 』は『移動先URL』 『 = 』は『代入(左辺へ右辺を代入)』 『 menu_pulldownhpurl 』は『引数』

　つまり、

この外部ファイルを指定したhtmlファイルのプルダウンメニューが 選択された場合、選択されたページに場所を移動する

という意味になります。

　プログラムやスクリプトは初めてという方は、かなり大変だったと思います、お疲れ様でした。

　でもこれができたら以降、考え方は同じですので覚えることは、ちょっとで大丈夫ですよ。

次は

文章をスクロールさせたい！

関連リンク

• メインメニュー
• ホームページ作成メニュー
• ウェブ開発メニュー