ベストアンサー

selectタグで日付を生成

2009/07/08 15:49

プルダウンメニューで、本日から４日後　から　１か月先までの日付をYYYY/MM/DDの形式で生成して表示されたいのですが、それをvalueに入れる方法が分かりません。下記までは書いてみたんですが、 <option value="???">のところに何と書いていいのか分からなくなってしまいました。。 for文などループ処理で書いた方がキレイだとは思いますが、イマイチ分からなかったので、併せて御教授いただければと思います。 <script type="text/javascript"> document.write(AddDate(+4)+'～'+ AddDate(+30)); function AddDate( n ){ var day = new Date( (new Date).getTime()+n*24*60*60*1000); return (day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate()); } </script> <select name="delidate"> <option value=""><script type="text/javascript">document.write(AddDate(+4));</script></option> <option><script type="text/javascript">document.write(AddDate(+5));</script></option> <option><script type="text/javascript">document.write(AddDate(+6));</script></option> <option><script type="text/javascript">document.write(AddDate(+7));</script></option> <option><script type="text/javascript">document.write(AddDate(+8));</script></option> <option><script type="text/javascript">document.write(AddDate(+9));</script></option> <option><script type="text/javascript">document.write(AddDate(+10));</script></option> <option><script type="text/javascript">document.write(AddDate(+11));</script></option> <option><script type="text/javascript">document.write(AddDate(+12));</script></option> <option><script type="text/javascript">document.write(AddDate(+13));</script></option> <option><script type="text/javascript">document.write(AddDate(+14));</script></option> <option><script type="text/javascript">document.write(AddDate(+15));</script></option> <option><script type="text/javascript">document.write(AddDate(+16));</script></option> <option><script type="text/javascript">document.write(AddDate(+17));</script></option> <option><script type="text/javascript">document.write(AddDate(+18));</script></option> <option><script type="text/javascript">document.write(AddDate(+19));</script></option> <option><script type="text/javascript">document.write(AddDate(+20));</script></option> <option><script type="text/javascript">document.write(AddDate(+21));</script></option> <option><script type="text/javascript">document.write(AddDate(+22));</script></option> <option><script type="text/javascript">document.write(AddDate(+23));</script></option> <option><script type="text/javascript">document.write(AddDate(+24));</script></option> <option><script type="text/javascript">document.write(AddDate(+25));</script></option> <option><script type="text/javascript">document.write(AddDate(+26));</script></option> <option><script type="text/javascript">document.write(AddDate(+27));</script></option> <option><script type="text/javascript">document.write(AddDate(+28));</script></option> <option><script type="text/javascript">document.write(AddDate(+29));</script></option> <option><script type="text/javascript">document.write(AddDate(+30));</script></option> </select> 分かり難く申し訳ないですが、宜しくお願い致します。

kazuya88
お礼率28% (38/134)

JavaScript
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2009/07/08 20:54 回答No.3

No2です。初期状態の指定（HTMLでのselected）は、elm.options[index].selected = trueなどで設定しておくのが正解かも知れませんが、指定しないとブラウザ側で最初のオプションを自動的に表示するようになっているみたいですね。いずれにしても、リストの最初がデフォルトになっているほうがいいでしょうから・・・＜案1＞スクリプトでループで書き出す前にoption[0]にデフォルトの内容を設定しておく。（方法はループ内で設定しているのと同じです。No1様が上げられている参考サイトも参考にしてください。）＜案2＞ HTMLのオプションの最初に <option value="default" selected>-------</option> などをいれておいて、スクリプトでの書き換えはオプションの2番目からにする。スクリプトがオフの場合のことも考えると、案2が良いのではと思います。

質問者

お礼 2009/07/09 18:11

伝えられていた仕様が変更になってしまったので、また別の質問を設定して、改めてご質問しようと思います。 4日以降ではなくて、4営業日（土日祝日休み）以降の日付で出力するとの事で変更になりました！またデフォルトで <option value="default" selected>-------</option> が表示される形を希望しています。またご機会がありましたら何卒よろしくお願いします。

質問者

補足 2009/07/09 11:11

何度も申し訳ありません.. 私も案２が良いと思い、オプションの２番目からスクリプトの書き換えをしようと思い、#1様に教えてもらったサイトなど参考にして色々と試しているんですがうまく表示されません。。

その他の回答 (2)

fujillin
ベストアンサー率61% (1594/2576)

2009/07/08 17:30 回答No.2

とりあえず、こんな感じ？ <html> <head> <script type="text/javascript"> window.onload = function() { var d, str, elm = document.getElementById('delidate'); var day = new Date(); day.setMilliseconds(4*24*60*60*1000); for (d=0; d<26; d++) { str = day.getFullYear() + '/' + (day.getMonth() + 1) + '/' + day.getDate(); elm.options[d] = new Option(str, str); day.setMilliseconds(24*60*60*1000); } } </script> </head> <body> <select name="delidate" id="delidate"> <option value="4日後">4日後</option> <option value="5日後">5日後</option> 　　　・・・・・・ <option value="30日後">30日後</option> </select> </body> </html> HTML内のoptionタグを省略しても動きますが、ユーザがjavascriptをオフにしているとオプションが何も表示されなくなってしまうので、デフォルトとして4日後などの表示をするようにしています。（日付には変換されませんが、表示はされる → 後の処理に影響しますが…）想像ですが、この結果を処理するものをサーバ側のCGIやphpなどで用意なさっていると思いますが、どうせなら、このセレクタの出力もサーバサイドの処理で出力した方がよいのではないでしょうか。

質問者

補足 2009/07/08 19:18

ご回答ありがとうございます！まさにその通りです。とても助かります。ありがとうございました！＞このセレクタの出力もサーバサイドの処理で出力した方がおっしゃる通りサーバー側で出力できれば良いのですがASPで融通のきかないシステムなのでJsで実装しようと思っております。一点だけ追加でお願いがあるのですが、、上記のサンプルで頂いたコードだと、デフォルトは4日後の日付ですが --------（点線）をデフォルト表示させる事は可能でしょうか？？もしfujillin様が宜しければ教えてください。宜しくお願いいたします。

yyr446
ベストアンサー率65% (870/1330)

2009/07/08 16:53 回答No.1

javascript DOM関数　を調べてみるとよいと思います。 (参考) http://f32.aaa.livedoor.jp/~azusa/?t=js&p=selectoption そこにずばりのサンプルがあります。 http://f32.aaa.livedoor.jp/~azusa/?t=js&p=selectoption#a_addremove

質問者

お礼 2009/07/08 19:15

ご回答ありがとうございます！ともて参考になるので、今後の参考にさせていただこうと思います。

関連するQ&A

selectタグで日付を生成
プルダウンメニューで、指定の日付をYYYY/MM/DDの形式で生成して表示されたいと思っています。具体的な方法は、先日別の質問にて御教授いただきました。しかし途中で仕様が変更になってしまって、今回新たにご質問させて頂いております。希望としては、本日から4営業日（土日祝日休み）から30日先までの日付をYYYY/MM/DDの形式で生成して表示されたいと思っています。そして、初期表示として <option value="default" selected>-------</option> が先頭にくるようにして、 2行目からスクリプトでの書き換えを行なうようにしたいと思っています。日付指定の補足ですが、本日から4営業日後の日付は、土日祝を含めての日数で表示させたいと思います。例） 2009/7/16　だった場合（プルダウンメニューで） 2009/7/23 2009/7/24 2009/7/25 2009/7/26 2009/7/27 … 2009/8/15 ちょっと心配ですが、祝日もスクリプトでカウントされるのでしょうか。。質問内容が分かりづらいかと存じますが、何卒よろしくお願いいたします。以前の質問URLはこちらです。 http://oshiete1.goo.ne.jp/qa5108724.html <html> <head> <script type="text/javascript"> window.onload = function() { var d, str, elm = document.getElementById('delidate'); var day = new Date(); day.setMilliseconds(4*24*60*60*1000); for (d=0; d<26; d++) { str = day.getFullYear() + '/' + (day.getMonth() + 1) + '/' + day.getDate(); elm.options[d] = new Option(str, str); day.setMilliseconds(24*60*60*1000); } } </script> </head> <body> <select name="delidate" id="delidate"> <option value="default" selected>-------</option> <option value="4日後">4日後</option> <option value="5日後">5日後</option> <option value="6日後">6日後</option> <option value="7日後">7日後</option> <option value="8日後">8日後</option> <option value="9日後">9日後</option> <option value="10日後">10日後</option> <option value="10日後">11日後</option> <option value="10日後">12日後</option> <option value="10日後">13日後</option> <option value="10日後">14日後</option> <option value="10日後">15日後</option> <option value="10日後">16日後</option> <option value="10日後">17日後</option> <option value="10日後">18日後</option> <option value="10日後">19日後</option> <option value="10日後">20日後</option> <option value="10日後">21日後</option> <option value="10日後">22日後</option> <option value="10日後">23日後</option> <option value="10日後">24日後</option> <option value="10日後">25日後</option> <option value="10日後">26日後</option> <option value="10日後">27日後</option> <option value="10日後">28日後</option> <option value="10日後">29日後</option> <option value="30日後">30日後</option> </select> </body> </html>
- ベストアンサー
- JavaScript
javascriptで質問
javascript初心者です。日付で自動的に変わるようなメニューが作りたいのですがもっとシンプルに簡潔にできますか？また、開いているページのタブの色を他と変えたいのですができますか？以下ソース↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript">  </script> </head> <body> <ul class="menu"> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </ul> </body> </html>
- 締切済み
- JavaScript
プルダウンメニュー日付生成で月の変わり目について
初心者です。質問集をいろいろ探して日付生成できたのですが月末、月初がうまくいきません。イヌでも・・やトホホ・・など探してますがマッチする情報が見つからないのでわかったら教えて下さい。１００にち分を表示するようにしてます。このソースは短くてシンプルなので気に入ってます、 ======================================== <SCRIPT type="text/javascript"> window.onload = function() { var d, str, elm = document.getElementById('gdate'); var day = new Date(); day.setMilliseconds(24*60*60*1000); for (d=1; d<100; d++) { str = (day.getMonth() + 1) + '/' + (day.getDate() -1); elm.options[d] = new Option(str, str); day.setMilliseconds(24*60*60*1000); } } </SCRIPT><SELECT name="HIDUKE" id="gdate"> <OPTION>日付選択</OPTION> </SELECT> ======================================== あまり複雑にしないで解決する方法ありますか。
- ベストアンサー
- JavaScript
hiddenフォームのvalueを自動生成したいのですが...
JavaScriptで生成した値を、同じページの中にあるinput type=hiddenフォームのvalueの値として使用したいのですが、うまく行きません。普通のinputタグであれば、 <SCRIPT Language="JavaScript">  </SCRIPT> <BODY onLoad="SetOrderId()"> <INPUT NAME="OrderId" TYPE="TEXT" onClick="SetOrderId()"> で、ページを開いたときにOrderIdフォームに値が代入されているのですが、 <input type=hidden name="OrderId"> としたときには、上記のスクリプトで生成した値がinput type=hiddenのvalueに設定されず、困っています。どうすればinput type=hiddenのvalueの値にJavaScriptで生成した値を代入できるのでしょうか？
- ベストアンサー
- JavaScript
それぞれの表記の色を変えるには？
先日、日数カウンターの代わりに、表記を変えるには　という質問をして、お答えを頂き、無事解決したのですが、また新たな壁にぶつかってしまいました・・・ <script type="text/javascript">  </script> というプログラムで、以下のように変更して、文字の色を変える事はできたのですが <font color="#0000ff"><script type="text/javascript">  </script></font></td> 以下のように、その表記別に色を変える方法が分かりません良く出来ました　　　赤　font color="#ff0000 あともう少し　　　　　青　font color="#0000ff この調子で　　　　　黄色　font color="#ffff00 どなたか、分かる方がいらっしゃいましたら、どうか宜しくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
現在の日付から、１ヶ月前にするスクリプトです。
現在の日付から、１ヶ月前にするスクリプトです。月を「-1」すると0月になるので、「12」になるようにしたのですが、年が「2005」のままです。同様に「2004」になるようなやりかたを教えてください。 <script language="JavaScript">  </script>
- ベストアンサー
- JavaScript
タグの大文字と小文字
今、ホームページを作っているんですが、タグは大文字と小文字と区別するのでしょうか。<FONT>などは<font>としてもきちんと表示されるのですが、今日の日にちが出るようにjavascriptで、 <script language="javascript">  </script> と貼ったのですが、日にちが表示されずエラーが出てしまいまいます。タグの間違いだとおもい参考にした物と比較したのですが、大文字が入っているところが小文字になっているだけでそのほかの間違いがありませんでした。大文字と小文字を区別するタグもあるっていることなのでしょうか。回答お願いします。
- ベストアンサー
- HTML
明日の日付
お世話になります。一週間のスケジュールをWEB上で表示するのにJavaScriptで日付を取得したいです。本日の曜日を判定して一週間後の日付を計算させたくて以下のJavaScriptを書きました。 w = (new Date()).getDay(); if(w == 1) { mydate=new Date(); Ye=mydate.getFullYear()+"年"; Mo=mydate.getMonth()+1+"月"; Da=mydate.getDate()+"日"; document.write(Mo+Da+"(月)"); } if(w == 2) { mydate=new Date(); Ye=mydate.getFullYear()+"年"; Mo=mydate.getMonth()+1+"月"; Da=mydate.getDate()+6+"日"; document.write(Mo+Da+"(月)"); } この書き方だと月末がうまく処理出来ません。 32日33日となってしまいます。正しいJavaScriptの記述を教えて下さい。宜しくお願いいたします。
- ベストアンサー
- JavaScript
JS 日付表示
JavaScript for文の日付表示について JavaScriptでfor文で日付表示したい場合、月末の最終日を取得するだけでは月の切り替えができないのでしょうか？今日から一週間後までを表示するアプリを作りたいのですが1/31を過ぎると2/1にならず1/32と表示されてしまいます。何か間違っている所ありますでしょうか？以下ソースコード <script type="text/javascript"></script> <body> </body>
- ベストアンサー
- JavaScript
クッキーを食べさせた会員には割引価格を適用したい。
他所を参考にして作ってみました。次の3点がよくわかりません。アドバイスをいただけるとありがたいです。・価格が表示されない。・有効期限は24日間？・function cgIMG()の役割。 <script type="text/javascript"> function checkmember() { var price = '20000'; var mprice = price * 0.9; if(document.cookie.substring(0, 11) == "cgIMGnm=123"){ fm.kakaku.value = mprice; } else{ fm.kakaku.value = price; } } function eatcookie(name,data,days){ var cdate=new Date(); cdate.setTime(cdate.getTime()+1000*60*60*24*days); document.cookie=name + "=" + data + " ; expires=" + cdate.toGMTString(); } function writeprice() { document.write("<p>会員価格：'+mprice+'</br>通常価格：'+price+'</p>"); } function cgIMG(){ eatcookie("cgIMGnm","123", 10); } </script> <body onload="return checkmember()"> <p> <script type="text/javascript"> if(document.cookie.substring(0, 11) == "cgIMGnm=123"){ document.write('<a href="#" onClick="cgIMG()">' + '現在ログイン中</a>'); } else{ document.write('<a href="#" onClick="cgIMG();location.reload()">' + 'ログインしてください</a>'); } </script> <script type="text/javascript"> writeprice(); </SCRIPT> </p> <form name="fm" id="fm" Action="" METHOD="POST"> <INPUT TYPE="text" NAME="kakaku" id="kakaku"> <SELECT NAME="kazu"> <OPTION>1<OPTION><OPTION>2<OPTION> </SELECT> <INPUT TYPE="SUBMIT" VALUE="カートに入れる"> </FORM> <form> <input type=button onclick=eatcookie("cgIMGnm","0",-1) value="クッキー削除"> </form> </body>
- ベストアンサー
- JavaScript

selectタグで日付を生成