ページを読み込まずにselectタグの中身を切り替える方法とは？
- ANAのトップページの航空券検索フォームで、搭乗日を変更すると自動的に日のフォーム内容も変更されます。
- これはどのような技術を使っているのでしょうか？ソースを見ても分かりませんでした。
- JavaScriptや他の言語を使用しているのか、具体的な実装方法を教えてください。
- ベストアンサー
ページを読み込み直さずに、selectタグの中身を切り替える方法は？
ページを読み込み直さずに、selectタグの中身を切り替える方法は？ ANA(http://www.ana.co.jp)のトップページの左側にある航空券の検索フォームで、 搭乗日の「月」を変更すると、自動的に「日」のフォーム内容がその月に合ったもの に変更されるのですが、これはどのような技術を使っているのでしょうか？ ページを読み込みなおす事無く、selectタグの中身が切り替わっています。 ソースを見ても、JavaScriptのonchangeも使っておらず、「月」を選択した際に、 まずどのように動作してるかすら分かりませんでした。 ANAと全く同じやり方でなくても構いませんので、どのようにこの処理を実現 させているのかをご教示下さい。 JavaScriptなのかその他の言語なのかも不明だったので、HTMLのカテゴリで 質問させていただきました。 よろしくお願いいたします。
- go-ape
- お礼率85% (17/20)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （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名をソース内で発見できなかったので、外部のスクリプトで処理してるのでしょうね。
関連するQ&A
- 別ページから別ページへタグを貼り付け。
1のページから2のページを開きます。 1のページにはフォームが設置してあって、中身を自由に書けるようになっています。 2にはHTMLなどの使い方が載っています。 この時、2の中に設置してあるボタンなどを押したら、そのタグなどが1のページのフォームの中に入るような仕組みってできるでしょうか？ 2のタグがかいてあるのはTEXTAREA内なのでコピペでもできるんですけど、、、簡単にしてくれ、と言われそうで。 何か方法がありましたらよろしくお願いいたします。
- ベストアンサー
- HTML
- selectタグの項目を制御する
フォーム内のプルダウンの項目を制御する方法がわからなくて困っています。 form1というフォーム内にプルダウンが3つあります。 <select name="select_1"> <option value="AAA">AAA</option> <option value="BBB">BBB</option> <option value="CCC">CCC</option> </select><br/> <select name="select_2"> <option value="AAA_1">AAA_1</option> <option value="AAA_2">AAA_2</option> <option value="BBB_1">BBB_1</option> <option value="CCC_1">CCC_1</option> </select><br/> <select name="select_3"> <option value="AC">AC</option> <option value="AB">AB</option> <option value="B_1">B_1</option> <option value="B_2">B_2</option> <option value="B_3">B_3</option> </select><br/> ●まず、select_1がAAAなら、select_2でAAA_1とAAA_2のみ選択できるようし、select_2で、AAA_1が選択されたらselect_3にACをAAA_2が選択されたらABを表示。 ●select_1でBBBが選択されたら、select_2にBBB_1のみを表示し、変更不可にする。そして、select_3にABC,B_1,B_2,B_3を表示。 ●select_3でCCCが選択されたら、select_2にCCC_1のみを表示して変更不可にし、select_3にACのみを表示して変更不可にする。 こんな感じにしたいのですが、どうもうまく出来ません。 考えたのは、各selectタグにonchange=change_1(form1)として、関数を呼び出し、 no= form1.select_1.selectedIndex; noが0なら thisForm.select_2.length = 2; //オブジェクトを2にする thisForm.select_2.options[0].value = "AAA_1"; の様にしたのですが、はじめに表示したoptionを消したりする方法や変更不可にする方法ってあるんでしょうか？また、ほかの方法など、どなたかわかる方がいましたら、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- Javascript selectタグ 値 利用
javascriptで、<select>タグの扱い方について <select>のドロップダウンで、選択されたvalue値の取得 var adrress = document.getElementById("ID名").selectedIndex; console.log(address); これですと、ログにundefinedと表示されるのですが、selectタグにonchange="処理"（？）を入れて、その関数も定義する方法以外に、<select>のvalueの値 を、変数に格納して、利用する方法はありますでしょうか？ 詳しい方回答よろしくお願い致します。
- ベストアンサー
- JavaScript
- （javascript, Ajax）IE7.0でのselectタグのプロパティについて
Javascriptで困っています。 詳しい方、是非教えて下さい。 HTMLのselectタグの内容が変更された時に処理を行う Ajaxプログラムを書いています。 selectタグにid属性を付けて、id="selectPref"という 名称にしています。 インクルードした.jsファイルで、このselectPrefオブ ジェクトが変更された時の処理を記述したいのですが、 変数に、 selectPref.valule を代入した時点でランタイムエラーが発生します。 「"selectPref"は宣言されていません」 というメッセージ内容です。 しかし、その数行前のイベントハンドラで、selectPref オブジェクトの値に変更があった事はちゃんと検知で きています。 何が悪いのでしょうか？ なお、本件は、IE7.0で起こっている現象です。 Firefox3.0.4では、正常に（期待通りに）動作してい るので、余計にIEで動かない理由が分かりません。 教えて頂けましたら幸いです。 以下、ソースから必要箇所のみ抜粋します。 ==メインのHTML== Headerセクション <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="registration1.js"></script> BodyセクションのFormタグ内 <select size="1" id="selectPref"> <option selected value="0">▼都道府県を選択</option> </select> ==インクルードした.jsファイル== prototype.jp は、version 1.6.0.3 registration1.jpは、下記の通り。 onload = init; var pref_id; function init() { $("selectPref").onchange = prefDisp; //←この行は動いている } function prefDisp() { pref_id = selectPref.value; //←この行がエラー } ==以上==
- ベストアンサー
- JavaScript
- タグで表示されるプログラムに関して
JavaScriptというか、HTMLというか、 タグで記述されるプログラムの類を、 感覚的に理解しようと取組んでいるのですが、 どうも頭に入ってこず悩んでおります。 アクセスなどで、フォームを作成してそこに ボタンやフィールドを載せて・・・という具合の プログラムはイメージ(理解/体得)できているのですが HTMLで、要はタグで表示されていて、 それが実際に動かすとフォーム(というかWEBページ)というか、 どうやって、そういうものになったりするのが いまいちピンと来ないのです。 （あとＣＳＳとかも・・・） なにか、よい学習方法はありますでしょうか。 何卒アドバイスをお願いいたします。
- ベストアンサー
- SE・インフラ・Webエンジニア
- フォームに書き込まれたHTMLタグを出力したい
フォームに書き込んだHTMLタグを、出力後、ちゃんとHTMLタグとして生成させる方法を知りたいのですが。(言葉足らずですいません、例えば、掲示板の入力フォームで、テキストに書かれた例えば<font color=red>というHTMLタグを使い、フォーム送信後、文字が赤くなっている、ということを実現させたいだけなのですが) 当方、Perlどころかプログラミングそのものを理解していない者ですが、訳あってソースをいじるお手伝いをすることになって困っております。以前、さらっと一行、コードを書くだけで実現できると思ったのですが。ご教授頂ければ幸いです。
- ベストアンサー
- Perl
- selectタグの数の初期化（繰り返し処理）
Javascript勉強中です。 selectタグ数を初期化をするにあたり、 下記の４つの処理を繰り返し処理で一括にしたいのです。 document.estimateEnter.middle1.length = 1; document.estimateEnter.middle2.length = 1; document.estimateEnter.middle3.length = 1; document.estimateEnter.middle4.length = 1; ■HTML <SELECT NAME="category[]" id="middle1"> <option> ～ </SELECT> <SELECT NAME="category[]" id="middle2"> <option> ～ </SELECT> ～ ID値を、「middle＋数字」としています。 数字の部分を、i変数でうまくループさせたい。 「middle*」を「i」にしてforループさせようとしても、うまくいきません。 for (var i = 0; i < middle.length; i++) { document.estimateEnter.eval("middle"+ i ).length = 1; } evalをつかってやってみたのですが、うまくいきません。 selectタグの数はつねにかわるので、動的にしておく必要があります。 対処方法がわかる方、おしえてください。
- ベストアンサー
- JavaScript
- cakephp上のJavascript設定
CakepPHPのフォームヘルパーで”月”のセレクトボックスを作成、 Javascriptで何月に設定されたかを取得し、２月なら２９日まで、４月６月９月１１月なら３０日までのセレクトボックスを作成する、 という部分を考えています。 View側で echo $this->Form->select('month', $month, $label, array('onChange' => 'return daysPerMonth()')) . "月 "; とし（$monthは１～１２月）、Javascript側でgetElementByIdで選択された月を取得するところまではできているのですが、Javascriptからの戻り値を取得する方法がわかりません。 ご教授頂けないでしょうか。 また、もっと違った方法でも実現可能なようでしたらそちらもお教え願います。 宜しくお願いします。
- ベストアンサー
- PHP
- HTMLの<a>タグで、あるリンクを作成しています。
HTMLの<a>タグで、あるリンクを作成しています。 今、javascriptでこの<a>タグに最初にフォーカスをあてたい（TAB遷移させたい） のですが、実現のやり方が分かりません。 ご存知でしたら、ご教授お願い致します。
- ベストアンサー
- JavaScript
- 現在表示中のページをCSSで別の書式を設定する
ここの左側のメニューのように http://www.doyouphp.jp/sample/sample_class_list.shtml クリックしているページの背景色を変えて表示したいと思っています。 ソースを見てみるとクリックすると<span>タグがつくようです。JavaScriptを利用しているようでもないのでどうやって実現しているのでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
お礼
具体的なソースまでご提示いただき、ありがとうございます。 addEventListenerについては、全く知りませんでした・・・。 その他も色々勉強になりました！