![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_13.png?e8efa67)
ページを読み込み直さずに、selectタグの中身を切り替える方法は?
ANA(http://www.ana.co.jp)のトップページの左側にある航空券の検索フォームで、
搭乗日の「月」を変更すると、自動的に「日」のフォーム内容がその月に合ったもの
に変更されるのですが、これはどのような技術を使っているのでしょうか?
ページを読み込みなおす事無く、selectタグの中身が切り替わっています。
ソースを見ても、JavaScriptのonchangeも使っておらず、「月」を選択した際に、
まずどのように動作してるかすら分かりませんでした。
ANAと全く同じやり方でなくても構いませんので、どのようにこの処理を実現
させているのかをご教示下さい。
JavaScriptなのかその他の言語なのかも不明だったので、HTMLのカテゴリで
質問させていただきました。
よろしくお願いいたします。
No.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>
具体的なソースまでご提示いただき、ありがとうございます。
addEventListenerについては、全く知りませんでした・・・。
その他も色々勉強になりました!
No.2
- 回答日時:
推測を書くのを忘れてました。
イベント処理を使って、onchangeを見張っているのだと思います。
onChangeは、オブジェクトに組み込みますが、onchangeは、待ち受け状態になったスクリプトという感じで、イベントに対応して動作します。
No.1
- 回答日時:
ANAのページには確かにonChangeはありませんが、一般的には月の部分にonChangeを使うと思います。
JavaScriptは至る所で使っているようですし、細かくは見ていませんが、日のID名をソース内で発見できなかったので、外部のスクリプトで処理してるのでしょうね。
参考URL:http://www.shurey.com/Soft/JS/form/index.html#se …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- JavaScript 指定時間になったら、WEBサイトの更新を自動で行うには…? 3 2022/04/28 22:14
- JavaScript JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです 2 2023/08/25 21:43
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- Chrome(クローム) 最近のGoogle Chromeのデータ読み込みの遅延やエラーって頻発しますか? 2 2023/01/06 22:12
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- Evernote EvernoteからAppleのメモに移行したい 1 2023/08/03 23:01
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
静止画画像をクリックすると音...
-
トリミングで表示した画像をク...
-
サイトにコンテンツを並べる際...
-
HTMLで特定の文字だけ色を変え...
-
Google検索も終わりですか? グ...
-
テーブルの行を折りたたみたい...
-
HTMLで表をつくったのですがウ...
-
HTMLですCSSです この画像のよ...
-
css初心者 フレックスボックス...
-
角丸画像の背景色を透明にした...
-
WEBページを強制的に横画面で見...
-
htmlです 文字はタマで、 黒線...
-
webデザインの勉強で、HTML/CSS...
-
私、Paiza Cloudやっているのだ...
-
WEBサイトの作成で、imgタグに...
-
先日ウェブデザイン技能検定三...
-
X の仕様変更? 埋め込みフレー...
-
指定した演算を実施の結果を表...
-
指定した演算を実施の結果を表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
ワンクリックで二箇所に表示さ...
-
スクロールバーのスクロール量...
-
横スクロールを右から左へ・・・
-
テキストをクリックすると答え...
-
bodyタグの範囲について
-
ページの読み込みが完了してか...
-
「overflow: hidden」ペー ジ内...
-
"mailtoでメールの【氏名】【性...
-
外部ページからハッシュタグ(...
-
DOCTYPE宣言をするとstyleが適...
-
mailtoで質問・・・
-
IE以外は色が付かない なぜ?
-
javaScript Nullまたはオブジェ...
-
divで作成したテキストボックス...
おすすめ情報