
JavaScriptで、年/月をSelectボックスで選択し、
その年/月のカレンダーを同一ページ内に表示したいのですが、
セレクトボックスで値を選択後、カレンダーを同一ページに
表示させる際、再表示時にセレクトボックスが初期状態に
戻ってしまいます。
そのため、カレンダーも初期状態のままのカレンダーのまま変更されません。
どうしたら、値を渡して再表示できるのでしょうか?
方法としましては、自分自身を再呼び込みするといった感じで
しか方法が見つかりませんが、別の方法があれば、それでも結構です。
初心者なもので、なにとぞ、よろしくお願いいたします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
こんにちはPAMchanさん、xruzです。
>どうしてもソースが分かりません。
function setLst() はリストボックスにoptionをセットしています。
function wtCal(cym) はyyyy/mm形式で受けたcymをもとにTableへ日付をセットしています。
(これ以上の説明はとんでもないことになりますので割愛させていただきます)
掲載のソースはフレームを使用していませんし再読込みもしていません。
>参考ページを見てみましたが、フレームについてが掲載されていました。
フレームについて書いてありますがフレームでなくても使えるテクニックです。
リストボックスで得た値をURLの後ろにつけて自分へリンクし、その値を読み込んで
カレンダーをdocument.writeすればできると思います。
ただフレーム使用したほうが楽だと思いますが使えない場合もありますので単独の場合のソース例を掲載いたしました。
がんばってくださいね。
No.2
- 回答日時:
こんばんはPAMchanさん、xruzです。
>再表示時にセレクトボックスが初期状態に戻ってしまいます
再表示しているから、そうなりますね。
>自分自身を再呼び込みするといった感じで
http://oshiete1.goo.ne.jp/kotaeru.php3?q=159215
が使えると思いますが。。。。
とりあえず再表示せずに表示するサンプルを載せておきます(Ie5.5sp2のみ動作確認)
<html>
<head>
<title>Calender</title>
</head>
<script language="JavaScript1.3">
<!--
var myDate=new Date();
function setLst() {with(document.frm.lst){
options.length=12;myDate.setDate(1);
for(var i=0;i<12;i++){
options[i].text=options[i].value=myDate.getFullYear()+"/"+(myDate.getMonth()+1);
myDate.setMonth(myDate.getMonth()+1);}
options[0].selected=true;wtCal(options[selectedIndex].value);}}
function wtCal(cym) {oTR=document.all('tbl').childNodes[0].childNodes;
for(var i=1;i<oTR.length;i++) for(var j=0;j<7;j++)
oTR[i].childNodes[j].innerText="";var lym=new Array();lym=cym.split("/");
myDate.setDate(1);myDate.setMonth(lym[1]-1);myDate.setFullYear(lym[0]);
for(var i=1;i<oTR.length;i++) { var k=(i>1)?0:myDate.getDay();
for(var j=k;j<7;j++) {var DD=myDate.getDate();oTR[i].childNodes[j].innerText=DD;
myDate.setDate(DD+1);if(lym[1]!=(myDate.getMonth()+1)) return;}}}
//-->
</script>
<body onLoad="setLst()">
<form method="post" name="frm">
<select name="lst" size="1" onChange="wtCal(this.options[this.selectedIndex].value);">
</select>
</form>
<table id="tbl" border="1">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>
がんばってくださいね(きたないソースでごめんなさい)。
この回答への補足
回答ありがとうございます。
回答くださいました、ソースで確認したところ、まさにこれです!
すごい! と思いましが、どうしてもソースが分かりません。
参考ページを見てみましたが、フレームについてが掲載されていました。
フレームを使用しているのでしょうか?document.frm.lstとあるし・・・
フレームを使用しているとして、ページは一つでもOKなのでしょうか?
フレームがあるとすると、ページが複数必要なのでは?と思うのです。
大変お手数ですが、大まかで結構ですので、もう少し説明をいただけますでしょうか?
本当に申しわけございません。 よろしくお願いいたします。
m(_ _)m
No.1
- 回答日時:
JavaScriptだけで、というのがよくわからないのですが・・・。
セレクトボックスの値がクリアされると言うことは、フォームのアクションかなにかで、再読込してるってことですよね?
CGIを使わずに、JavaScriptだけで値の持ち回しをされたいということであれば、難しいかと思います。
もしやるとしたら、クッキーを使う方法でしょうか。
セレクトボックスを選択したときに、Cookieをセットして、次に表示するときにCookieの値を拾ってきて、それと同じ値を持つOptionにSelectedをセットし、カレンダーを表示する・・・といった感じです。
JavaScript だけでは、難しいのですね。
それだけ、分かっただけでも進歩のようなきがします。
ありがとうございました。
Cookie でトライしてみようかと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
至急!GetElementById でtdの...
-
JavaScriptでテーブルの行入れ替え
-
テーブルのセル数取得
-
テーブル要素の操作
-
セルをドラッグで選択するときに、
-
クリックされた罫表セルの行番...
-
Select ボックスで選択した値を...
-
return trueとreturn falseの用...
-
javaScriptの変数をJavaの変数...
-
【javascript・PHP】プルダウン...
-
<input>の選択肢をプルダウンメ...
-
onchangeイベントを強制的に発...
-
Formのシリアライズができない
-
【jQuery】input nameの文字列...
-
データベースの値を判断してラ...
-
ラジオボタンが選択されたらテ...
-
innerHTML内では改行は禁止?
-
confirm()で表示したダイアログ...
-
Javascript ポップアップウィ...
-
複数のチェックボックス項目が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウンで選択すると、DBの...
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
JavaScriptでテーブルの行入れ替え
-
javascriptで質問です。 displa...
-
クリックされた罫表セルの行番...
-
jsで質問です。 displayプロパ...
-
JavaScriptでテーブルをクリッ...
-
テーブル内に表示されている数...
-
jqueryとscriptでTABLEのセルを...
-
tableの任意行にfocusをあてる
-
スクロールバーの表示位置を変...
-
Selenium.ChromeDriverの使い方...
-
テーブルの項目の値取得
-
jspでのArrayListの値の表示
-
二次元配列に数字をランダムに...
-
テーブルで表示する『列』を絞...
-
EasyUIのSubGrid(jquery)にお...
-
ブルダウン選択でページの表示...
おすすめ情報