- ベストアンサー
ページを読み込まずにselectタグの中身を切り替える方法とは？
- ANAのトップページの航空券検索フォームで、搭乗日を変更すると自動的に日のフォーム内容も変更されます。
- これはどのような技術を使っているのでしょうか？ソースを見ても分かりませんでした。
- JavaScriptや他の言語を使用しているのか、具体的な実装方法を教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
javascriptを利用して行なっていると思われます。 スクリプトが多すぎるので、ちゃんと確認してませんが、後半のほうの「renewal09/module.js」あたりに addMultiEventListener() というのがあって、イベントセット用の関数として用意されています。（他のモジュールにも似たようなものがいくつかありました） このようなものを利用して（別のところの似たものかも知れませんが）、onchangeイベントのハンドラをセットしていると思われます。 同じモジュールの中に「ドロップダウンリストに曜日を付加するaddWeekDropDown()」、「ドロップダウンリストに値をセットするsetDropDown()」なんてのが並んでいますので、実際の処理はこのあたりを利用しているものと思われます。 実際のANAのものは、カレンダー表示とも連携するようにもなっているので、少々複雑になっています。 カレンダーは置いておいて、selectの部分だけのまがいものサンプルを作成してみましたので、ご参考まで。 （処理方法は、ご提示のサイトとは違います） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <select id="month" style="width:5em; margin-right:2em;"> <option value="--">--</option> </select> <select id="day" style="width:7em;"> <option value="--">--</option> </select> <script type="text/javascript"> <!-- (function() { var today = new Date(), i, e, t; var yy =today.getFullYear(), mm = today.getMonth(), dd = today.getDate(); var week = "(日),(月),(火),(水),(木),(金),(土)".split(","); e = document.getElementById("month"); e.options.length = 0; for (i=0; i<12; i++) { t = (mm+i) % 12+1; e.options[i] = new Option(t + "月", t) } if(e.addEventListener) { e.addEventListener('change', function(e){change(e)}, false); } else if(e.attachEvent) { e.attachEvent('onchange', function(e){change(e)}); } daySet(mm); function daySet(m) { var y = yy + (m<mm?1:0), d, e = document.getElementById("day"); var lastday = new Date(y+"/"+(m+2)+"/0").getDate(); var w = new Date(y+"/"+(m+1)+"/1").getDay(); e.options.length = 0; for (d=0; d<lastday; w=++w%7 ) e.options[d++] = new Option(d+"日"+week[w], d); e.options[dd>lastday?lastday-1:dd-1].selected = true; } function change(evt) { var t = evt.target || evt.srcElement; dd = document.getElementById("day").value; daySet(+t.value-1); } })(); //--> </script> </body> </html>
その他の回答 (2)
- nine999
- ベストアンサー率44% (512/1140)
推測を書くのを忘れてました。 イベント処理を使って、onchangeを見張っているのだと思います。 onChangeは、オブジェクトに組み込みますが、onchangeは、待ち受け状態になったスクリプトという感じで、イベントに対応して動作します。
- nine999
- ベストアンサー率44% (512/1140)
ANAのページには確かにonChangeはありませんが、一般的には月の部分にonChangeを使うと思います。 JavaScriptは至る所で使っているようですし、細かくは見ていませんが、日のID名をソース内で発見できなかったので、外部のスクリプトで処理してるのでしょうね。
お礼
具体的なソースまでご提示いただき、ありがとうございます。 addEventListenerについては、全く知りませんでした・・・。 その他も色々勉強になりました！