我がまちの「給食」自慢を聞かせてっ！

selectタグで日付を生成

解決済

  • 質問者：kazuya88
  • 質問日時：
  • 回答数：3件

プルダウンメニューで、本日から４日後　から　１か月先までの日付を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>


分かり難く申し訳ないですが、宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No2です。



初期状態の指定（HTMLでのselected）は、elm.options[index].selected = trueなどで設定しておくのが正解かも知れませんが、指定しないとブラウザ側で最初のオプションを自動的に表示するようになっているみたいですね。
いずれにしても、リストの最初がデフォルトになっているほうがいいでしょうから・・・


＜案1＞
スクリプトでループで書き出す前にoption[0]にデフォルトの内容を設定しておく。
（方法はループ内で設定しているのと同じです。No1様が上げられている参考サイトも参考にしてください。）

＜案2＞
HTMLのオプションの最初に
<option value="default" selected>-------</option>
などをいれておいて、スクリプトでの書き換えはオプションの2番目からにする。

スクリプトがオフの場合のことも考えると、案2が良いのではと思います。

この回答への補足

何度も申し訳ありません..

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

補足日時：2009/07/09 11:11
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

伝えられていた仕様が変更になってしまったので、また別の質問を設定して、改めてご質問しようと思います。

4日以降ではなくて、4営業日（土日祝日休み）以降の日付で出力するとの事で変更になりました！

またデフォルトで
<option value="default" selected>-------</option>
が表示される形を希望しています。
またご機会がありましたら何卒よろしくお願いします。

通報する
お礼日時：2009/07/09 18:11

No.2

  • 回答者： fujillin
  • 回答日時：

とりあえず、こんな感じ？



<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などで用意なさっていると思いますが、どうせなら、このセレクタの出力もサーバサイドの処理で出力した方がよいのではないでしょうか。

この回答への補足

ご回答ありがとうございます！
まさにその通りです。とても助かります。ありがとうございました！

＞このセレクタの出力もサーバサイドの処理で出力した方が
おっしゃる通りサーバー側で出力できれば良いのですがASPで融通のきかないシステムなのでJsで実装しようと思っております。

一点だけ追加でお願いがあるのですが、、
上記のサンプルで頂いたコードだと、デフォルトは4日後の日付ですが

--------（点線）

をデフォルト表示させる事は可能でしょうか？？
もしfujillin様が宜しければ教えてください。
宜しくお願いいたします。

補足日時：2009/07/08 19:18
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

javascript DOM関数　を調べてみるとよいと思います。


(参考)
http://f32.aaa.livedoor.jp/~azusa/?t=js&p=select …
そこにずばりのサンプルがあります。
http://f32.aaa.livedoor.jp/~azusa/?t=js&p=select …
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/07/08 19:15

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報