teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップMySQLに関する質問２段プルダウンの値の保持について（JavaScript html）

編集履歴

回答編集履歴

1

確認画面からエントリーフォーム画面にPOST

2017/12/21 12:47

投稿

Tomak
Tomak

スコア1652

test CHANGED
@@ -1,4 +1,80 @@
1
+ 他の方の回答のコメントをみると、**確認画面 → エントリーフォーム**へ戻る場合はは`history.back()`で戻っているのですね。。。既に他の方の回答コメントに書いてありますように、**history.back()**ではやりたいことを実装することはできません。（一部のブラウザでは実現できません）
2
+
3
+
4
+
5
+ 質問文を編集するか追記しておいたほうが良いと思います。
6
+
7
+
8
+
9
+ 確実に実現するには、**確認画面 → エントリーフォーム**へ戻るときも、既にPOSTされている値をPOSTするようにすればよいです。確認画面から完了画面でPOSTしているのであれば、同じロジックを使いまわしできると思います。どうしてもPOSTしたくない場合は、セッションを使います。しかし、こちらのほうがセッションをクリアするタイミングを考慮しなければならないので面倒です。
10
+
11
+
12
+
13
+ #### 確認画面
14
+
15
+
16
+
17
+ ```php
18
+
19
+ <input name="back" type="button" onClick="history_back();" value="　入力画面へ戻る　">
20
+
21
+
22
+
23
+ <script type="text/javascript">
24
+
25
+ function history_back()
26
+
27
+ {
28
+
29
+ var form = document.createElement('form');
30
+
31
+ form.action = '/base.html';
32
+
33
+ form.method = 'post';
34
+
35
+ document.body.appendChild(form);
36
+
37
+
38
+
39
+ //セレクトボックスA
40
+
41
+ var branch_name = document.createElement('input');
42
+
43
+ branch_name.type = 'hidden';
44
+
45
+ branch_name.name = 'branch_name';
46
+
47
+ branch_name.value = <?php echo $branch_name; //セレクトボックスA ?>;
48
+
49
+ form.appendChild(branch_name);
50
+
51
+
52
+
53
+ //セレクトボックスB
54
+
55
+ var belong = document.createElement('input');
56
+
57
+ belong.type = 'hidden';
58
+
59
+ belong.name = 'belong';
60
+
61
+ belong.value = <?php echo $belong; //セレクトボックスB ?>;
62
+
63
+ form.appendChild(belong);
64
+
65
+
66
+
67
+ form.submit();
68
+
69
+ }
70
+
71
+ </script>
72
+
73
+ ```
74
+
75
+
76
+
1
- 質問文のコードだと、**セレクトボックスB（belong）**が生成されるタイミングは、セレクトボックスAの値を**変更（onChange）**したときのみなので、確認画面から戻ると消えてしまいます。
77
+ **セレクトボックスB（belong）**が生成されるタイミングは、セレクトボックスAの値を**変更（onChange）**したときのみなので、確認画面から戻ると消えてしまいます。
2
78
 
3
79
 
4
80
 
@@ -6,18 +82,78 @@
6
82
 
7
83
 
8
84
 
85
+ #### エントリー画面 - セレクトボックスA
86
+
87
+
88
+
9
- セレクトボックスAをJavaScriptで生成しているのか、PHPで生成しているのか不明だったのでとりあえず、PHPだと想定して回答します。
89
+ 確認画面からPOSTした値を取得して、セレクトボックスをPHPで選択状態にします。
10
-
11
-
12
-
13
- **PHP**
14
90
 
15
91
 
16
92
 
17
93
  ```php
18
94
 
95
+ <SELECT autofocus size="1" name="branch_name" id="branch_name" onChange="BelongList(this.options[selectedIndex].value);">
96
+
19
97
  <?php
20
98
 
99
+
100
+
101
+ $sql = "select ID,branch_name from t_branch order by ID";
102
+
103
+ $rs = mysql_query($sql);
104
+
105
+
106
+
107
+ //↓↓追加↓↓
108
+
109
+ //セレクトボックスAのPOST値取得（確認画面から戻った場合）
110
+
111
+ $branch_post = (int)filter_input(INPUT_POST, 'branch_name', FILTER_SANITIZE_NUMBER_INT);
112
+
113
+
114
+
115
+ while($row=mysql_fetch_array($rs)){
116
+
117
+ //↓↓追加↓↓
118
+
119
+ $selected = $posted_branch === $row["ID"] ? ' selected="selected"' : '';
120
+
121
+ print("<OPTION value=". $row["ID"] . $selected .">". $row["branch_name"] . "</OPTION>\n");
122
+
123
+ }
124
+
125
+
126
+
127
+ ?>
128
+
129
+ </SELECT>
130
+
131
+ ```
132
+
133
+
134
+
135
+ #### エントリー画面 - JavaScript
136
+
137
+
138
+
139
+ セレクトボックスAが、表示時に選択状態にあるか確認して`BelongList()`を実行するJavaScriptコードを追加します。
140
+
141
+
142
+
143
+ ```js
144
+
145
+ //データベースよりJavaScriptにて「所属名」を配列に格納する
146
+
147
+ belong_value = new Array();
148
+
149
+ belong_text = new Array();
150
+
151
+ belong_length = new Array();
152
+
153
+
154
+
155
+ <?php
156
+
21
157
  //ここでBプルダウンの値を計算して配列に格納する。
22
158
 
23
159
  //データサンプル
@@ -28,70 +164,72 @@
28
164
 
29
165
  //belong_text[11] = new Array("---","北海道","北海道倶楽部","札幌クラブ");
30
166
 
167
+ ?>
168
+
31
169
 
32
170
 
33
171
  //↓↓追加↓↓
34
172
 
35
173
 
36
174
 
37
- //ブランチセレクトボックスのPOST値取得（確認画面から戻った場合）
175
+ //セレクトボックスA値
38
-
176
+
39
- $branch_post = (int)filter_input(INPUT_POST, 'branch_name', FILTER_SANITIZE_NUMBER_INT);
177
+ var posted_branch_name = parseInt(document.form_kojin.branch_name.value);
40
-
41
-
42
-
43
- $branch_option = '';
178
+
44
-
45
-
46
-
47
- foreach ($belong_text as $idx => $label) {
179
+ if (selected > 0) {
48
-
180
+
49
- $selected = $branch_post === $belong_value[$idx] ? ' selected' : '';
181
+ BelongList(posted_branch_name);
50
-
51
- $branch_option .= '<OPTION value="'.$belong_value[$idx].'"'.$selected.'>'.$label.'</OPTION>'."\n";
182
+
52
-
53
- }
183
+ }
184
+
185
+
186
+
54
-
187
+ //セレクトボックスB値
188
+
189
+ var posted_belong = <?php echo ($val = filter_input(INPUT_POST, 'belong', FILTER_SANITIZE_NUMBER_INT)) ? $val : 0; ?>;
190
+
191
+
192
+
193
+ //↑↑ここまで↑↑
194
+
195
+
196
+
197
+ function BelongList(idx){
198
+
199
+ //選択リストに項目を追加
200
+
201
+ for(i=0;i<belong_length[idx];i++){
202
+
203
+ document.form_kojin.belong.length=belong_length[idx];
204
+
205
+ document.form_kojin.belong.options[i].text = belong_text[idx][i];
206
+
207
+ document.form_kojin.belong.options[i].value= belong_value[idx][i];
208
+
209
+
210
+
211
+ //↓↓追加↓↓
212
+
213
+ if (posted_belong == belong_value[idx][i]) {
214
+
215
+ document.form_kojin.belong.options[i].selected = true;
216
+
217
+ }
218
+
219
+ }
220
+
221
+ //選択リストがブランクの場合
222
+
55
- ?>
223
+ if(i==0){
224
+
225
+ document.form_kojin.belong.length=1;
226
+
227
+ document.form_kojin.belong.options[i].text = "---";
228
+
229
+ document.form_kojin.belong.options[i].value= 0;
230
+
231
+ }
232
+
233
+ }
56
234
 
57
235
  ```
58
-
59
-
60
-
61
- **JavaScript**
62
-
63
-
64
-
65
- そして、セレクトボックスAが、表示時に選択状態にあるか確認して`BelongList()`を実行するJavaScriptコードを追加します。
66
-
67
-
68
-
69
- ```js
70
-
71
- var selected = parseInt(document.form_kojin.branch_name.value);
72
-
73
-
74
-
75
- if (selected > 0) {
76
-
77
- BelongList(selected);
78
-
79
- }
80
-
81
- ```
82
-
83
-
84
-
85
- **セレクトボックスA**
86
-
87
-
88
-
89
- ```html
90
-
91
- <SELECT autofocus size="1" name="branch_name" id="branch_name" onChange="BelongList(this.options[selectedIndex].value);">
92
-
93
- <?php echo $branch_option; ?>
94
-
95
- </SELECT>
96
-
97
- ```