function goURLbySelect(u) {
    var i=u.options[u.selectIndex].value;
    if (i=='') {
        window.alert('選択肢を選んで下さい！'); return(false);
        }
    location.href=i;
    return(false);
}

document.write('<form action="#" method="post" onsubmit="return(goURLbySelect(document.forms[0].opt1)); "><div><select name="opt1">'+
    '<option value="">検索エンジン</option>'+
    '<option value="http://www.yahoo.co.jp/">ヤフージャパン</option>'+
    '<option value="http://www.google.co.jp/">グーグル日本</option>'+
    '<option value="http://www.infoseek.co.jp/">インフォシーク</option>'+
    '</select>'+
    ' <input type="submit" " value="ゴー！" />'+
    '</div></form>');

スクリプトの構成。

▲記事先頭
△前項目
▽次項目

このスクリプトは、フォームのサブミットボタンが押された際に呼出される函数「goURLbySelect()」の定義とdocument.write()メソッドでメニューとなるフォームを書出しているだけです。

今回は<select>要素の値が操作によって変わってもその時点ではジャンプしないため、<select>要素にonchange属性属性を入れて起動したりはしません。

その代わりに、サブミットボタンが押下された際に起動するonsubmit属性を<form>要素開始タグに入れてこれで函数「goURLbySelect()」を起動します。

<input type="submit">要素にonclick属性及びonkeypress属性を入れても良いのですが、onsubmit属性には以下のメリットがあります。
どんな入力デヴァイスでも意味を持つので、アクセシビリティ上好ましい
サブミット(フォームからの送信)と言う概念は入力デヴァイスと関係ありません。どんな入力デヴァイスでもサブミッションが出来るからです。
- このように、入出力デヴァイスに関係無いイヴェントハンドラを論理イヴェントハンドラと言います。
- 逆に、入出力デヴァイスに依存するイヴェントハンドラを物理イヴェントハンドラと言います。
入力デヴァイスごとに処理を分けなくても良い

アクセシビリティ上、マウス対応のonclick属性とキーボード対応のonkeypress属性の二つを書く必要がなく、onsubmit属性一つで済みます。

尚、<a>要素などのように適切な論理イヴェントハンドラ(デヴァイス無関係のイヴェントハンドラ)が無い場合は、物理イヴェントハンドラ(デヴァイス依存のイヴェントハンドラ)を併用するしかありません。

函数「goURLbySelect()」は、指定されたフォームの指定された<select>要素で選択されたURLへジャンプすると言う動作をします。

但し、初期状態で何も選択されていない場合はwindow.alert()メソッドでエラーダイアログを出すようにしました。

値の引き渡し方。

▲記事先頭
△前項目
▽次項目

ここで問題になるのは、フォームからどのような形で指定のフォームと<select>要素を通知するのかと言う事です。

ここでは、HTML文書中０番目のフォームの「opt1」と言う名のついた<select>要素と言う情報を渡しております。

```
goURLbySelect(document.forms[0].opt1)
```

尚、プルダウンメニュー(選択後直ちにジャンプするヴァージョン)と違って、thisでの指定は出来ません。

なぜなら、当該<select>要素外から呼出しているため、thisで指定すると全然違うオブジェクトを指定する事になるからです。

実際の動作。

▲記事先頭
△前項目
▽次項目

呼出元から受取った<select>要素のオブジェクトを元に、選択された値(選択された<option>要素のvalue属性値＝ジャンプ先のURL)を取得し、それが空文字列の場合はwindow.alert()メソッドでエラーダイアログを出して戻ります。

そうでなければ、location.hrefプロパティにその値を入れる事でジャンプします。

応用・CGIと組み合わせる。

▲記事先頭
△前項目

初めにも解説しましたが、プルダウンメニューを実現するCGIを使える場合は、そのCGIを利用するフォームに組み込む事で、スクリプト実行可能環境でのパフォーマンスを向上させる事が出来ます。

この場合、スクリプトが実行出来ない環境であってもフォームは有効になるので、document.write()メソッドでフォームを書き出す必要は無く、直接HTML文書に書き出せば良いでしょう。

すなわち、スクリプトのソースファイルから後半のdocument.write()の文を削除して使います。

具体例を挙げておきます。

ここでは、CGIのURLが「http://www.uso800.ne.jp/userID/cgi-bin/jump.cgi」で、CGIのパラメータは「addr」をポストする事でアドレスを指定するものとします。

ソースを飛ばす

<script type="text/javascript" src="PullDownMenu2.js"></script>
<form action="http://www.uso800.ne.jp/userID/cgi-bin/jump.cgi" method="post" onsubmit="return(goURLbySelect(document.forms[○].addr)); ">
    <div>
        <select name="addr">
            <option value="">検索エンジン</option>
            <option value="http://www.yahoo.co.jp/">ヤフージャパン</option>
            <option value="http://www.google.co.jp/">グーグル日本</option>
            <option value="http://www.infoseek.co.jp/">インフォシーク</option>
            </select>
        <input type="submit" value="ゴー！" />
        </div>
    </form>

まず、<script>要素で実行スクリプトを呼出します。

<form>要素のaction属性値は、CGIのURLとなります。

また、<select>要素のname属性値は、CGI側が指定している「addr」を使います。

最後に、<form>要素に埋め込まれたonsubmit属性では、HTML中○番目のフォーム内の「addr」と言う名のついた<select>要素を函数に引き渡します。

以上より、CGIを利用するフォームに組み込む場合は、

当該<form>要素より前に<script>要素でスクリプトを読込む
当該<form>要素にonsubmit属性を加える。

だけで良い事が分かります。

実際にはもっと複雑なCGIを利用する事もあるかも知れませんが、その場合はスクリプトの改造が必要になる場合もあります。
また、CGIで指定されているパラメータが、HTMLの要素名や属性名である場合は、ネットスケープ 3.xなどの旧型ブラウザで正常に動作しなくなる場合があります。対策としてはgoURLbySelect()函数の冒頭でブラウザ判定を行ない、旧型ブラウザの場合は「return(true);」を実行させればいいでしょう(この場合、旧型ブラウザではCGIが起動します)。

本文の先頭へ

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com