• 締切済み

Select ボックスで選択した値を渡して、同一ページに再表示するには?

JavaScriptで、年/月をSelectボックスで選択し、 その年/月のカレンダーを同一ページ内に表示したいのですが、 セレクトボックスで値を選択後、カレンダーを同一ページに 表示させる際、再表示時にセレクトボックスが初期状態に 戻ってしまいます。 そのため、カレンダーも初期状態のままのカレンダーのまま変更されません。 どうしたら、値を渡して再表示できるのでしょうか? 方法としましては、自分自身を再呼び込みするといった感じで しか方法が見つかりませんが、別の方法があれば、それでも結構です。 初心者なもので、なにとぞ、よろしくお願いいたします。

みんなの回答

  • xruz
  • ベストアンサー率50% (72/143)
回答No.3

こんにちはPAMchanさん、xruzです。 >どうしてもソースが分かりません。 function setLst() はリストボックスにoptionをセットしています。 function wtCal(cym) はyyyy/mm形式で受けたcymをもとにTableへ日付をセットしています。 (これ以上の説明はとんでもないことになりますので割愛させていただきます) 掲載のソースはフレームを使用していませんし再読込みもしていません。 >参考ページを見てみましたが、フレームについてが掲載されていました。 フレームについて書いてありますがフレームでなくても使えるテクニックです。 リストボックスで得た値をURLの後ろにつけて自分へリンクし、その値を読み込んで カレンダーをdocument.writeすればできると思います。 ただフレーム使用したほうが楽だと思いますが使えない場合もありますので単独の場合のソース例を掲載いたしました。 がんばってくださいね。

  • xruz
  • ベストアンサー率50% (72/143)
回答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> がんばってくださいね(きたないソースでごめんなさい)。

PAMchan
質問者

補足

回答ありがとうございます。 回答くださいました、ソースで確認したところ、まさにこれです! すごい! と思いましが、どうしてもソースが分かりません。 参考ページを見てみましたが、フレームについてが掲載されていました。 フレームを使用しているのでしょうか?document.frm.lstとあるし・・・ フレームを使用しているとして、ページは一つでもOKなのでしょうか? フレームがあるとすると、ページが複数必要なのでは?と思うのです。 大変お手数ですが、大まかで結構ですので、もう少し説明をいただけますでしょうか? 本当に申しわけございません。 よろしくお願いいたします。 m(_ _)m

noname#1785
noname#1785
回答No.1

JavaScriptだけで、というのがよくわからないのですが・・・。 セレクトボックスの値がクリアされると言うことは、フォームのアクションかなにかで、再読込してるってことですよね? CGIを使わずに、JavaScriptだけで値の持ち回しをされたいということであれば、難しいかと思います。 もしやるとしたら、クッキーを使う方法でしょうか。 セレクトボックスを選択したときに、Cookieをセットして、次に表示するときにCookieの値を拾ってきて、それと同じ値を持つOptionにSelectedをセットし、カレンダーを表示する・・・といった感じです。

PAMchan
質問者

お礼

JavaScript だけでは、難しいのですね。 それだけ、分かっただけでも進歩のようなきがします。 ありがとうございました。 Cookie でトライしてみようかと思います。

関連するQ&A

  • セレクトボックスを動的に選択された状態で表示

    画面から取得した値を元にセレクトボックスが選択された状態で画面に表示させる方法を教えて下さい。 JavaScript //前の画面から値を取得 //取得した値は問題無し if(kbumon=="10"){ var bumon = "部署1"; }else if(kbumon=="20"){ var bumon = "部署2"; }else{ var bumon = ""; } var data = { bumon : bumon, } html <span style=" color:black;"><b>部署:</b></span> <select name="bumon" class="select"> <option></option> <option>部署1</option> <option>部署2</option> </select>

  • セレクトボックスの選択状態について

    セレクトボックスの横にチェックボックスがあり、 チェックボックスON→セレクトボックスはAの内容 チェックボックスOFF→セレクトボックスはBの内容 となるものがあります。 問題は、これに値を保持する機能を付けたいのです。 例えば、チェックボックスにチェックがある状態でセレクトボックスの3番目の要素を選択していたとします。そこで、チェックをはずし一度Bの内容を表示させてから、再度チェックを付けAの内容に戻した時に3番目の要素が選択されている状態にしたいです。逆の場合も同様にしたいです。アドバイスを頂けたらと思います。宜しくお願い致します。 <script type="text/javascript"> <!-- a = 0; b = 0; txt = {}; txt["A"] = new Array("設定なし","A1","A2"); txt["B"] = new Array("設定なし","B1","B2","B3"); function set(select_box,check_box){ if (document.forms[0].elements[check_box].checked) { key = "A"; b = document.forms[0].elements[select_box].options.selectedIndex; } else { key = "B"; a = document.forms[0].elements[select_box].options.selectedIndex; } while (document.forms[0].elements[select_box].options[0]){ document.forms[0].elements[select_box].options[0] = null; // セレクトボックスのメニューを消去 } for (i=0; i<txt[key].length; i++){ document.forms[0].elements[select_box].options[i] = new Option(txt[key][i],txt[key][i]); // セレクトボックスのメニューの項目を生成・表示テキストとvalue値を設定 } if (key = "A") { document.forms[0].elements[select_box].options.selectedIndex = a; } else if (key = "B") { document.forms[0].elements[select_box].options.selectedIndex = b; } } // --> </script>

  • セレクトボックスの初期選択状態(SELECTED)を動的にしたいのですが

    モーダル内に表示させるセレクトボックスで、毎回モーダル起動時ごとに、 セレクトボックス内の初期選択状態を変えたいと思っています。 1回目のモーダル起動時には本日の日付をSELECTEDにし、2回目以降は 前回のモーダル起動時に選択した値をSELECTEDにしたいと思っております。 いろいろな方法があると思うのですが(てっとりばやく、フラグを持たせる とか、クッキーを使うとか・・・)、正しく実行されず、困っています。 どなたか、よいアドバイスをください。お願いいたします。

  • セレクトボックスの値による入力フォーム背景色の切り替え

    セレクトボックスで選択された値を見て、 text入力欄の背景色を変えたいのですが、 JavaScriptの書き方がよくわかりませんので 教えていただけないでしょうか。 ----------------------------------------- セレクトボックス(SELECT_AREA)の値選択時に onChengeで呼び出して テキスト入力欄(MEMBER_NAME)の色を変えたい。 <html:select property="SELECT_AREA"> <html:text property="MEMBER_NAME" size="100" maxlength="20" style="background:#FF0000" /> ----------------------------------------------- よろしくお願いします。

  • セレクトボックスの初期選択と選択保持

    セレクトボックスで選択した日付でカレンダーの検索を行いたいです。 起動したときは当日日付を表示させ、検索後は選択した日付をそのまま表示させておきたいのですがうまくいきません。 javascriptを使用するのではないかと思うのですが、初心者のため記述の仕方がよくわかりません。 どなたかご教授いただけるとうれしいです。よろしくおねがいします。

  • javascriptでのセレクトボックスについて。

    javascriptを使ったセレクトボックスについて教えてください。 教えてgooのカテゴリ選択のように、セレクトボックスでjavascripを使い、 一つめのselectボックスでは ・1 ・2 ・3 のオプションを選択可能に 二つめのselectボックスでは、 1が選択されたら ・1の1 ・1の2 ・1の3 のオプションを選択可能に 2が選択されたら ・2の1 ・2の2 ・2の3 を選択可能に 3が選択されたら ・3の1 ・3の2 ・3の3 を選択可能に と言う風にはどうすれば出来るでしょうか? 教えてください、お願いします。

  • selectで選ばれた値を別ページのセレクトボックスへ渡す

    こんばんわ。 二つの連動したセレクトメニューがあって、別ページにもまったく同じものがあるんですが、最初のページで選ばれた値を別ページを読み込んだときにセレクトメニューに初期設定として渡すことはできますか? いろいろWEBでサンプル等探しておりましたが、ニッチもサッチもいきません。どなたかご教授ください。

  • 強制的にセレクトボックスの値を変える

    http://www.okweb.ne.jp/kotaeru.php3?q=256766の関連質問にもなるのですが、 confirmで確認の際、「OK」でなく「キャンセル」の場合に、選択されたセレクトボックスの値を強制的に変更してsubmitさせる方法はないでしょうか。 confirm「学生ですか」→「OK」そのままsubumit confirm「学生ですか」→「キャンセル」セレクトボックスの値を「学生以外」などの値にしてsubmit

  • HTMLのテーブルの値と同じ値をセレクトボックスで選択したい

    テーブルには1月~12月までの値があり、セレクトボックスにも1月~12月の項目があります。 この様な場合で、テーブルの4月をクリックした場合、セレクトボックスの4月を選択状態にしたいです。 テーブルの値を取得し、テキストボックスに表示する事は出来ましたが、セレクトボックスの場合はさっぱり分かりません。宜しければご教授下さい。 下記は別のサイト様を参考にテスト中の物ですが、テキストボックスには可能ですが、セレクトボックスでは表示されません。 <SCRIPT TYPE="text/javascript"> <!-- function getCell(obj){ document.getElementById("text1").value = document.getElementById("td"+obj + "a").textContent; } // --> </SCRIPT> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr id="tr0" onclick="getCell('1')"> <td id="td1a">1月</td> </tr> <tr id="tr0" onclick="getCell('2')"> <td id="td2a">2月</td> </tr>   <tr id="tr0" onclick="getCell('3')"> <td id="td3a">2月</td> </tr>   省略 </table>  <select id="text1"> <option>1月</option> <option>2月</option> <option>3月</optio>     省略 </select> 初心者丸出しで申し訳有りませんが宜しくお願いします。

  • VBScriptでHTMLのセレクトボックスで表示されている値に指定したい

    VBScriptでHTMLのセレクトボックスで表示されている値(value)に指定したいと思っています。どのようにすればよいのでしょうか?詳しくは下記参照。 もし、VBSで無理であるのならほかの言語で可能な言語を教えていただきたく思います。 例:”value_1”を指定してVBSで選びたい <select name="select_name" onchange="select_onchange"> <option value="value_1">value_1_1</option> <option value="value_2">value_2_2</option> </select> (注意) 下記のように位置情報で指定するのではなく、valueの値(value_1)や表示されている値(value_1_1)でしたいと思っています。 IEオブジェクト.Document.フォーム名.コンボボックス名.selectedIndex = 0からの番号