あんな事がしたいをカタチに－ホームページの作り方・ウェブサイト作成制作ウェブ造は、ホームページ簡単作成・制作辞典

JavaScript解説

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

サイト内検索

カスタム検索

セレクト・プルダウンメニューで選択ページに飛びたい！『HTML/XHTMLタグ＆JavaScript編』

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　あなたはどうしますか？

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

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

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

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

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

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

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

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

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

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

　先ほどの例を使うと

そうです、「onChange=""」の部分がイベントの割当ということになります。(全て小文字で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.pulldownform.pulldownmenu.selectedIndex=="1")
    { location.href="" ; }
  else if (document.pulldownform.pulldownmenu.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 ]にコールした(関数を呼んだ)ページのURLが入り(この為[ document ]がどれなのかがわかる)、処理を分岐して選択された時の各URLを割り当てています。

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

　そしてプルダウンメニューを表示するhtmlファイルにJavaScriptの外部ファイルを設定すれば完了です。

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

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

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

  function menu_pulldown(menu_pulldownhpurl)
  {
～
  }

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

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

という意味になります。

　その他は

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

　つまり、

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

という意味になります。

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

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

次は

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

【JavaScript】セレクトボックスでメニューを表示して選択したページへ飛びたい！
【JavaScript】文章をスクロールさせたい！
【JavaScript】アニメーションを作りたい！
【JavaScript】現在の時間を表示させたい！
【JavaScript】タイマーを使いたい！
【JavaScript】JavaScriptをふんだんに使ったページを作ってみる
【JavaScript】escape/unescape変換フォームを作りたい！
【JavaScript】計算フォームを作りたい！
【JavaScript】n進数変換フォームを作りたい！
【JavaScript】マウスの状態によって処理したい！

ウェブ造ホームページの作り方・ウェブサイト作成制作

2004-2012

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

セレクト／プルダウン

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

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

ウェブ造 ホームページの作り方・ウェブサイト作成制作

ウェブ造ホームページの作り方・ウェブサイト作成制作