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で質問しましょう!
似たような質問が見つかりました
- Access(アクセス) Access DTPickerの初期表示月を変えたい 1 2022/08/02 08:55
- JavaScript HTML,JS初心者です。 2つのselectボックスが有り その選択の組み合わせにより 指定した文 3 2022/03/31 23:35
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- その他(クラウドサービス・オンラインストレージ) Googleカレンダーの共有について質問させて頂きます。 現在、個人でのGoogleカレンダーと職場 2 2022/10/19 15:58
- HTML・CSS HTMLのフォームについてお尋ねします 1 2022/12/03 21:47
- Windows 10 タスクバー上に表示されたアドレス・ボックス? 1 2023/04/30 17:37
- Excel(エクセル) エクセルの数式で教えてください。 1 2022/10/25 09:26
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- Excel(エクセル) Excelヘルプの原文を表示する最速の方法(手順)には? 1 2023/08/11 11:30
- Excel(エクセル) IF 関数で「〇〇 という文字を含む場合」の分岐処理で表示された数字はSUMで数字集計できますか? 3 2022/08/02 16:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンク色の変更
-
tableの任意行にfocusをあてる
-
TD内のチェックボックスの位置...
-
ラジオボタンとセルの連動
-
特定<table>内の<td>の色を変える
-
テーブルの変数について
-
JavaScriptで特定のtdタグにcla...
-
セルをドラッグで選択するときに、
-
ハイパーリンクを別ウインドウ...
-
PERL
-
JQueryでクリックされた文字を...
-
一覧から選択した行の行番号を...
-
netscapeでもinnerTextやinnner...
-
JavaScriptでテーブルをクリッ...
-
階層式メニューをtableタグ内に
-
【UWSC】HTML内のある部分を抽...
-
JavaScriptでテーブルの行入れ替え
-
return trueとreturn falseの用...
-
テキストボックス入力を半角英...
-
onClick="this.form.submit
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jsで質問です。 displayプロパ...
-
javascriptで質問です。 displa...
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
特定<table>内の<td>の色を変える
-
マウスをブラウザの外に出した...
-
添付画像のようなhtmlとcssのス...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
HTML中のTABLEのデータを抽出す...
-
jquery datatablesを使用 イン...
-
JavaScriptでテーブルをクリッ...
-
階層式メニューをtableタグ内に
-
マウスオーバー時テーブルの背...
おすすめ情報