電子書籍の厳選無料作品が豊富！

ページを読み込み直さずに、selectタグの中身を切り替える方法は？

解決済

  • 質問者：go-ape
  • 質問日時：
  • 回答数：3件

ページを読み込み直さずに、selectタグの中身を切り替える方法は？

ANA(http://www.ana.co.jp)のトップページの左側にある航空券の検索フォームで、
搭乗日の「月」を変更すると、自動的に「日」のフォーム内容がその月に合ったもの
に変更されるのですが、これはどのような技術を使っているのでしょうか？

ページを読み込みなおす事無く、selectタグの中身が切り替わっています。
ソースを見ても、JavaScriptのonchangeも使っておらず、「月」を選択した際に、
まずどのように動作してるかすら分かりませんでした。

ANAと全く同じやり方でなくても構いませんので、どのようにこの処理を実現
させているのかをご教示下さい。

JavaScriptなのかその他の言語なのかも不明だったので、HTMLのカテゴリで
質問させていただきました。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

具体的なソースまでご提示いただき、ありがとうございます。
addEventListenerについては、全く知りませんでした・・・。
その他も色々勉強になりました！

通報する
お礼日時：2010/08/02 17:04

No.2

  • 回答者： nine999
  • 回答日時：

推測を書くのを忘れてました。



イベント処理を使って、onchangeを見張っているのだと思います。
onChangeは、オブジェクトに組み込みますが、onchangeは、待ち受け状態になったスクリプトという感じで、イベントに対応して動作します。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： nine999
  • 回答日時：

ANAのページには確かにonChangeはありませんが、一般的には月の部分にonChangeを使うと思います。


JavaScriptは至る所で使っているようですし、細かくは見ていませんが、日のID名をソース内で発見できなかったので、外部のスクリプトで処理してるのでしょうね。

参考URL：http://www.shurey.com/Soft/JS/form/index.html#se …
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報