質問編集履歴

2

例を詳細に記載

2017/09/02 08:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -91,3 +91,29 @@
91
91
 
92
92
 
93
93
  よろしくお願いします。
94
+
95
+
96
+
97
+ ###追記
98
+
99
+ やりたいこと2の「選択された年によって選択できる月日を動的に変更したい」とはどういうことか、上記例でもう少し詳細に書きます。難しい書き方をしてしまいましたが考え方は単純です。
100
+
101
+
102
+
103
+ 初期状態で2017年9月2日(現在日付)が選択されていた場合:
104
+
105
+ - この状態で月のセレクトボックスを見ると9〜12しか表示されない
106
+
107
+ - この状態で日のセレクトボックスを見ると2〜31しか表示されない
108
+
109
+ →要は過去日を除いて未来日が選択できる状態
110
+
111
+
112
+
113
+ 上記状態で年を2017から2018年(未来年)に変更した場合:
114
+
115
+ - この状態で月のセレクトボックスを見ると1〜12を表示
116
+
117
+ - この状態で日のセレクトボックスを見ると1〜31しか表示されない
118
+
119
+ →要は未来日がすべて選択できる状態

1

ご指摘を受けてコードの修正・質問内容の追記をしました

2017/09/02 08:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,9 @@
4
4
 
5
5
  ###やりたいこと
6
6
 
7
- デフォルトで現在日付を選択状態としたい
7
+ 0. デフォルトで現在日付を選択状態としたい
8
8
 
9
- 利用開始日なので過去日付を選択できないようにしたい
9
+ 0. 利用開始日なので過去日付を選択できないようにしたい
10
10
 
11
11
 
12
12
 
@@ -16,21 +16,21 @@
16
16
 
17
17
  <form method="post">
18
18
 
19
- <div class="form-group">
19
+ <div>
20
20
 
21
- <label for="" class="col-sm-2 control-label">利用開始日</label>
21
+ <label>利用開始日</label>
22
22
 
23
- <div class="form-content col-sm-10">
23
+ <div>
24
24
 
25
- <select id="year"><option value="0">----</option></select>年
25
+ <select id="year"></select>年
26
26
 
27
- <select id="month"><option value="0">--</option></select>月
27
+ <select id="month"></select>月
28
28
 
29
- <select id="day"><option value="0">--</option></select>日
29
+ <select id="day"></select>日
30
30
 
31
- </div>
31
+ </div>
32
32
 
33
- </div>
33
+ </div>
34
34
 
35
35
  </form>
36
36
 
@@ -38,27 +38,31 @@
38
38
 
39
39
 
40
40
 
41
- ```Jquery
41
+ ```Javascript
42
42
 
43
43
  var time = new Date();
44
44
 
45
45
  var year = time.getFullYear();
46
46
 
47
- for (var i = year; i >= 1900; i--) {
47
+ var selected = ' selected="selected"';
48
48
 
49
+
50
+
51
+ for (var i = year; i <= year + 5; i++) {
52
+
49
- $('#year').append('<option value="' + i + '">' + i + '</option>');
53
+ $('#year').append('<option value="' + i + '"'+ (i == year ? selected : '') +'>' + i + '</option>');
50
54
 
51
55
  }
52
56
 
53
57
  for (var i = 1; i <= 12; i++) {
54
58
 
55
- $('#month').append('<option value="' + i + '">' + i + '</option>');
59
+ $('#month').append('<option value="' + i + '"'+ (i == time.getMonth() + 1 ? selected : '') +'>' + i + '</option>');
56
60
 
57
61
  }
58
62
 
59
63
  for (var i = 1; i <= 31; i++) {
60
64
 
61
- $('#day').append('<option value="' + i + '">' + i + '</option>');
65
+ $('#day').append('<option value="' + i + '"'+ (i == time.getDate() ? selected : '') +'>' + i + '</option>');
62
66
 
63
67
  }
64
68
 
@@ -66,4 +70,24 @@
66
70
 
67
71
 
68
72
 
73
+ ###つまっているところ
74
+
75
+ 上記やりたいことの1は実現できたのですが2を実現するための実装方法がわかりません。
76
+
77
+
78
+
79
+ 現在日付を2017年9月2日とした例:
80
+
81
+ - 2017年9月2日〜2022年12月31まで選択可としたい
82
+
83
+ (※Toを+5年としていますがこだわりはなく仮の値としています)
84
+
85
+ - 0000年1月1日〜2017年9月1日まで選択不可としたい
86
+
87
+
88
+
89
+ エラーが出て詰まっているというわけではなく、選択された年によって選択できる月日を動的に変更したいがその実現方法がわからないという状況です。
90
+
91
+
92
+
69
- よろしくお願いします
93
+ よろしくお願いします