プルダウンメニューで、本日から4日後 から 1か月先までの日付を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>
分かり難く申し訳ないですが、宜しくお願い致します。
No.3ベストアンサー
- 回答日時:
No2です。
初期状態の指定(HTMLでのselected)は、elm.options[index].selected = trueなどで設定しておくのが正解かも知れませんが、指定しないとブラウザ側で最初のオプションを自動的に表示するようになっているみたいですね。
いずれにしても、リストの最初がデフォルトになっているほうがいいでしょうから・・・
<案1>
スクリプトでループで書き出す前にoption[0]にデフォルトの内容を設定しておく。
(方法はループ内で設定しているのと同じです。No1様が上げられている参考サイトも参考にしてください。)
<案2>
HTMLのオプションの最初に
<option value="default" selected>-------</option>
などをいれておいて、スクリプトでの書き換えはオプションの2番目からにする。
スクリプトがオフの場合のことも考えると、案2が良いのではと思います。
この回答への補足
何度も申し訳ありません..
私も案2が良いと思い、オプションの2番目からスクリプトの書き換えをしようと思い、#1様に教えてもらったサイトなど参考にして色々と試しているんですがうまく表示されません。。
伝えられていた仕様が変更になってしまったので、また別の質問を設定して、改めてご質問しようと思います。
4日以降ではなくて、4営業日(土日祝日休み)以降の日付で出力するとの事で変更になりました!
またデフォルトで
<option value="default" selected>-------</option>
が表示される形を希望しています。
またご機会がありましたら何卒よろしくお願いします。
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などで用意なさっていると思いますが、どうせなら、このセレクタの出力もサーバサイドの処理で出力した方がよいのではないでしょうか。
この回答への補足
ご回答ありがとうございます!
まさにその通りです。とても助かります。ありがとうございました!
>このセレクタの出力もサーバサイドの処理で出力した方が
おっしゃる通りサーバー側で出力できれば良いのですがASPで融通のきかないシステムなのでJsで実装しようと思っております。
一点だけ追加でお願いがあるのですが、、
上記のサンプルで頂いたコードだと、デフォルトは4日後の日付ですが
--------(点線)
をデフォルト表示させる事は可能でしょうか??
もしfujillin様が宜しければ教えてください。
宜しくお願いいたします。
No.1
- 回答日時:
javascript DOM関数 を調べてみるとよいと思います。
(参考)
http://f32.aaa.livedoor.jp/~azusa/?t=js&p=select …
そこにずばりのサンプルがあります。
http://f32.aaa.livedoor.jp/~azusa/?t=js&p=select …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
document.getElementById
-
location.hrefが動かない・・・
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
bodyにidをつける理由は何ですか?
-
base64encodeでの文字化けについて
-
javascriptでalertの文字列をコ...
-
window.openの後にエンコードを...
-
JavaScriptでiframeの内容を「...
-
getElementsByNameで要素が取得...
-
複数のページ(html)のvalueを...
-
【SSI】include file、include ...
-
【javascript クロスブラウザ...
-
SCRIPT5007: 未定義または NULL...
-
Dreamweaver で 外部JSを読み込...
-
スマホ上で、左右スワイプで次...
-
マウスクリックした地点のテキ...
-
ページによって表示位置がずれ...
-
確認ダイアログで「キャンセル...
-
フレームでの右クリック禁止
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1から100までの平方根を表示す...
-
javascriptで変数を組み込みたい
-
document.getElementById
-
ランダム音声と正解・不正解の表示
-
JavaScriptの入れ子
-
IEでiframe内のcookieを保持
-
動的生成したscriptタグが実行...
-
¥マークの検索について
-
history.back スクリプトオフ...
-
外部jsからdocument.writeする...
-
javascriptでの大文字小文字の区別
-
CGIフォーム一定時間過ぎる...
-
明日の日にちを表示するときは
-
ブラウザのアドレス欄に
-
HPビルダーで『最終更新日時』...
-
ブログ上で複数のjavaスクリプ...
-
書いたクッキーを読み出してメ...
-
ホームページ内に直接書込がしたい
-
JSによるリンク先の値の取得
-
カウントダウンとカウントアッ...
おすすめ情報