プルダウンdeジャンプ
【目次に戻る】

    はいこんにちは。今日はちょいと趣向を変えて、講座形式でいってみたいと思います。
    しかーも今日の題材はプルダウンメニュー。まともに役立ちそうなスクリプトをご紹介するのなんて初めてなのではないでしょうか。
    もっともその分ありきたりなスクリプトなんですけどね……
    あんまりありきたりなのも私らしくないので、徐々にえあらしさをにおわせながら行ってみたいと思います。
    １．選択したらジャンプ 

    
<form>
<select onChange="top.location.href=value">
<option value="#"></option>
<option value="(移動したい先URL)">(移動したい先名前)</option>
<option value="(移動したい先URL)">(移動したい先名前)</option>
　　　　　　　　　　　　　　：
　　　　　　　　　　　　　　：
</select>
</form>

    こちら。
    あれですね。あれですね。ごくごく普通のプルダウンメニュー。選択して目的のページに飛ぶという。
    これがですね、案外、どうやってやるの？って聞かれることもありましてね、書いてみた次第です。
    使い方は超簡単。赤字のところを自分のサイトのメニューに書き換えて、htmlのソースの、メニューをつけたいお好きなところに貼り付けるだけ。項目は・・・ってところに好きなだけ増やしましょう。
    form部だけで、JavaScript部はなし。正確に言うと二行目の、

    <select onChange="location.href=value">

    この赤いとこがJavaScriptです。一行くらいならformの中に入れられちゃうんですね。いや、一行以上でも入れられるんだけど、あんまり入れると見栄えが悪いからね。

    で、次。

    ２．選択し、ボタンを押したらジャンプ 

    
<form>
<select name="sel2">
<option value="#"></option>
<option value="(移動したい先URL)">(移動したい先名前)</option>
<option value="(移動したい先URL)">(移動したい先名前)</option>
　　　　　　　　　　　　　　：
　　　　　　　　　　　　　　：
</select>
<input type=button onClick="top.location.href=sel2.value" value="Jump!">
</form>

    これは上のと同じように選択するんですが、選択しただけじゃ動きません。ボタンを押したときにジャンプです。こっちを使っているサイトさんも多いですね。
    先程と同じように赤字を書き換えればOK。
    さっきはselectタグの中に入ってた、on何とかが、今度はINPUTタグの中に入ってます。
    on何とかは、「このオブジェクト(ボタンとかテキストボックスとか)をどうにかしたら、なんか動くよ？」っていうしるしです。どうすれば動き出すのか？ってのはon何とかの、何とかに当たる言葉で決まります。
    例えばonClickなんて書いてあったら、それをクリックしたときに指定した動きをします。
    こいつをイベントハンドラなどといいます。

    というわけで本日のテーマはイベントハンドラです。

    ３．選択し、(フォーカスが当たっている状態で)ENTERを押すとジャンプ 

    
<form>
<select onKeyPress="top.location.href=value">
<option value="#"></option>
<option value="(移動したい先URL)">(移動したい先名前)</option>
<option value="(移動したい先URL)">(移動したい先名前)</option>
　　　　　　　　　　　　　　：
　　　　　　　　　　　　　　：
</select>
</form>

    殆ど１．と同じスクリプト。違うのは一箇所だけです。
    さてこいつを動かしてみましょう。選択しました、変えました。動きませんね。さりとてボタンもありません。どうしましょう。
    答えは、選択したらキーボードのENTERキーを押す、です。
    そうすると飛びます。まずもってこんなややこしいスクリプトを使うつもりになる人はいないでしょう。
    ここでのイベントハンドラは2行目のonKeyPress。キーを押した時に動きます。
    別にエンターでなくてもいいみたいなんですけど、他の処理が優先されるのかな？別のキーだとなんかあんまりうまくいきません。イベントは発生してるはずなんですけどね？
    ４．選択して画面のサイズ変えたらジャンプ 

    
<body onResize="if(document.form1.sel4.value!='#')top.location.href=document.form1.sel4.value">
　　　　　　　　　　　　　　：
　　　　　　　　　　　　　　：
<form name="form1">
<select name="sel4">
<option value="#"></option>
<option value="(移動したい先URL)">(移動したい先名前)</option>
<option value="(移動したい先URL)">(移動したい先名前)</option>
　　　　　　　　　　　　　　：
　　　　　　　　　　　　　　：
</select>
</form>

    ハイ最後にこれ。選択します。さてどうやって動かすか。こいつはですね。
    ブラウザのウィンドウのサイズを変えてやるのです。マウスでぐぐっと引っ張って。するとあら不思議。いきなりページが切り替わります。やらしいですね。こんなアホなスクリプト、どうするんだ。
    ちなみにここで使ったイベントハンドラはonResize。読んで字の如く、サイズを変えたときにスクリプトが発動します。onResizeはbodyタグの中に入れて使うみたいです。上と同じようにselectの所に書いたら動きませんでした。まあ、当たり前ですね。サイズを変えるのはウィンドウ全体であってSelectボックスではないのですから。

    他にもいろんなイベントハンドラがありますので興味のある方は次も見てみてください。


    【イベントハンドラ】 【戻る】