2006年10月20日(金) 23時33分36秒 [Web関連]
短いJavaScriptで作るプルダウンメニュー
HTMLのフォームとJavaScriptを使って「プルダウンメニュー」を作ることができます。
具体的には、HTMLのselect要素（＋option要素）でプルダウンメニューを作って、select要素に対して onClickイベントなり、onChangeイベントなりで、ページを移動するJavaScriptを書いてやれば良いわけです。簡単です。
で、たいていは、別に用意したページ移動用JavaScriptの関数を、onClickイベントかonChangeイベントで呼び出して使います。
でも、書くのが面倒くさいんですよね。^^;
普段は、「過去に既に書いたJavaScriptソース」をそのままコピー＆ペーストすりゃいいんですけど、たまたまそういうデータのない環境で作業してたので、1から書かねばなりませんでした。
JavaScriptのリファレンスもないし、ネット接続環境もない。そういうところで、プルダウンメニューを実現するJavaScriptを1から書く。
なかなか面倒です。
…というわけで、なんとか短く書く方法はないものだろうかと(笑)頭を悩ませていましたら、以下のようなソース（HTML＆JavaScript）を思いつきました。
<select id="menu" onChange="location.href = value;">
<option value="index.html">Select</option>
<option value="page1.html">ページ1</option>
<option value="page2.html">ページ2</option>
<option value="page3.html">ページ3</option>
</select>
</form>
これだけ。
一見、JavaScriptなんて存在しないように見えるかも知れませんが、2行目の
onChange属性の中身がJavaScriptです。
いやあ、たったこれだけでも、プルダウンメニューとしてページ移動機能が実現できるんですねえ。^^;;;
※location.hrefというのは、アクセスしてるページ（URL）のこと。こいつにアクセスさせたいURLを代入すれば、そこに移動させられます。
JavaScriptを別途関数にすると、「value」属性の値を取得する記述が面倒なんですよね。「value」と書いただけじゃ、どこのvalueなのかが特定できないので当然ダメで、documentの中のformの中のselectの中の…みたいな記述をしないといけません。
でも、select要素の中にJavaScriptを書く場合は、ただ「value」と書けば、そのselect要素のvalueを拾ってくれるんじゃないかな？と思ったんです。(^_^;)
当たりでした。
もっとも、この記述方法が、どれだけのブラウザで正しく動くのかは未確認なんですが。^^; IEとFirefoxしか導入されてない環境で作ったので。(^_^;)
今、Macでのテスト環境を持ってないので、Macユーザの方々、試してみて下さい。^^;
リファレンスのない環境で頭をひねると、短いコードが書けるのかな。(笑)
この日記へのコメントはお気軽に！ コメント数:3 トラックバック数:0
| « mod_rewriteに詰まる…「^」と「$」記号 |
前後のエントリ < 旧 ／ 新 > | CGI内でSSIっぽい処理をさせるPerlコード » |
このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。（JavaScriptが有効でないと表示されません。）
はじめまして。
今、HPでプルダウンメニューを作ろうとしているのですが、
どのプルダウンメニューの作り方を読んでみても大体は
プルダウンメニューのおいてあるページそのものが
選択メニューページに変わってしまうものばかりでした。
自分の作りたいページのイメージは、
まずフレーム枠を上下に作り、
上のフレーム内にプルダウンメニューを置き、
下のフレーム内にプルダウンメニューで選んだページを
表示させたいと考えているのですが、
これは可能なのでしょうか。
どこをみてもみんな プルダウンメニューの置いてあるページから選択ページへと切り替わってしまうものばかりだったので、
自分が考えているようなページは作れないんじゃないかとさえ
考え始めているところです。
もし可能でしたら、教えていただけると幸いです。
comment欄に質問を書いてしまい恐縮ですが
よろしくお願いいたします。
投稿者 kinoko : 2007年02月26日 13:45
parent.フレーム名.value
でフレーム指定が可能ですので、
parent.下フレーム名.location.href = value;
で下フレームの表示ページが変わるはずです。
投稿者 Anonymous : 2007年11月09日 15:46
大変遅くなってしまいましたがありがとうございました！
投稿者 kinoko : 2008年03月15日 13:10
コメント数： 3件