teratail
回答率
85.46%
質問するログイン新規登録
トップHTML5に関する質問HTMLでselectboxと同時にlabelも一緒に隠したい

編集履歴

回答編集履歴

5

コード改善

2020/12/27 06:53

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -350,8 +350,4 @@
350
350
 
351
351
  </body>
352
352
 
353
-
354
-
355
- </html>
356
-
357
353
  ```

4

コードの書き換え

2020/12/27 06:53

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -1,81 +1,7 @@
1
- 素のJavascriptで書いた一例です。
2
-
3
- cssも追加してます。
4
-
5
- jqueryを使いたい場合、わからないコードを検索したら比較的簡単に出来ると思います。
6
-
7
-
8
-
9
1
  ```html
10
2
 
11
- <!DOCTYPE html>
12
-
13
- <html lang="ja">
14
-
15
-
16
-
17
- <head>
18
-
19
- <meta charset="UTF-8">
20
-
21
- <title>formrun.js - Confirm mode</title>
22
-
23
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css"
24
-
25
- integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
26
-
27
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js"
28
-
29
- crossorigin="anonymous"></script>
30
-
31
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"
32
-
33
- integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD"
34
-
35
- crossorigin="anonymous"></script>
36
-
37
- <script src="https://sdk.form.run/js/v2/formrun.js"></script>
38
-
39
-
40
-
41
- <style>
42
-
43
- .text-danger {
44
-
45
- display: none;
46
-
47
- }
48
-
49
-
50
-
51
- .form-group {
52
-
53
- display: none;
54
-
55
- }
56
-
57
-
58
-
59
- .form-group:nth-child(1),
60
-
61
- .form-group:nth-child(2) {
62
-
63
- display: block;
64
-
65
- }
66
-
67
- </style>
68
-
69
-
70
-
71
- </head>
72
-
73
-
74
-
75
3
  <body>
76
4
 
77
-
78
-
79
5
  <div class="container">
80
6
 
81
7
  <h1>formrun.js <small> - Confirm mode</small></h1>
@@ -196,7 +122,7 @@
196
122
 
197
123
  <div class="form-control-label" data-formrun-hide-if-confirm>
198
124
 
199
- <select class="form-control children" id="2" name="停留所">
125
+ <select class="form-control children" id="root1" name="停留所">
200
126
 
201
127
  <option value="" selected="selected">停留所を選択してください</option>
202
128
 
@@ -206,6 +132,12 @@
206
132
 
207
133
  <option value="南郵便局前" data-val="①ルート">南郵便局前</option>
208
134
 
135
+ </select>
136
+
137
+ <select class="form-control children" id="root2" name="停留所">
138
+
139
+ <option value="" selected="selected">停留所を選択してください</option>
140
+
209
141
  <option value="動物病院前" data-val="②ルート">動物病院前</option>
210
142
 
211
143
  <option value="マンション前" data-val="②ルート">マンション前</option>
@@ -218,9 +150,9 @@
218
150
 
219
151
  </div>
220
152
 
221
- <div class="cp_iptxt" data-formrun-show-if-confirm>
153
+ <div class="cp_iptxt">
222
-
154
+
223
- <span data-formrun-confirm-value="停留所"></span>
155
+ <span class="busStop"></span>
224
156
 
225
157
  </div>
226
158
 
@@ -264,6 +196,12 @@
264
196
 
265
197
  const children2 = document.getElementsByClassName("children")[1];
266
198
 
199
+ const root1 = document.getElementById("root1");
200
+
201
+ const root2 = document.getElementById("root2");
202
+
203
+ const busStop = document.getElementsByClassName("busStop")[0];
204
+
267
205
 
268
206
 
269
207
  select[1].addEventListener("change", () => {
@@ -284,11 +222,9 @@
284
222
 
285
223
  select[2].addEventListener("change", () => {
286
224
 
287
- for (let i = 1; i < 7; i++) {
225
+ select[3].value = "";
288
-
226
+
289
- children2.getElementsByTagName("option")[i].style.display = "block";
227
+ select[4].value = "";
290
-
291
- }
292
228
 
293
229
  if (select[2].value == "①ルート") {
294
230
 
@@ -296,84 +232,94 @@
296
232
 
297
233
  attention[2].style.display = "none";
298
234
 
235
+ root1.style.display = "block"
236
+
237
+ root2.style.display = "none"
238
+
239
+ } else if (select[2].value == "②ルート") {
240
+
241
+ selectWrap[3].style.display = "block";
242
+
243
+ attention[2].style.display = "none";
244
+
245
+ root1.style.display = "none"
246
+
247
+ root2.style.display = "block"
248
+
249
+ }
250
+
251
+ });
252
+
253
+
254
+
255
+ select[3].addEventListener("change", () => {
256
+
257
+ if (!(select[2].value == "")) attention[3].style.display = "none";
258
+
259
+ });
260
+
261
+
262
+
263
+ btn.addEventListener("click", (e) => {
264
+
299
- for (let i = 4; i < 7; i++) {
265
+ for (let i = 0; i < mustLen; i++) {
266
+
300
-
267
+ must[i].style.display = "none";
268
+
269
+ }
270
+
271
+
272
+
273
+ if (root1.style.display == "block") {
274
+
275
+ busStop.innerText = root1.value;
276
+
277
+ } else {
278
+
279
+ busStop.innerText = root2.value;
280
+
281
+ }
282
+
283
+
284
+
285
+ if (select[1].value == "" && select[0].value == "") {
286
+
287
+ attention[0].style.display = "block";
288
+
289
+ attention[1].style.display = "block";
290
+
291
+ e.preventDefault();
292
+
293
+ } else if (select[1].value == "希望無し" && !(select[0].value == "")) {
294
+
295
+ for (let i = 0; i < attentionLen; i++) {
296
+
301
- children2.getElementsByTagName("option")[i].style.display = "none";
297
+ attention[i].style.display = "none";
302
298
 
303
299
  }
304
300
 
301
+ return true;
302
+
303
+ } else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "" && select[4].value == "") {
304
+
305
+ setTimeout(() => {
306
+
307
+ btn.innerText = "未入力の項目があります"
308
+
309
+ }, 200);
310
+
311
+ for (let i = 0; i < attentionLen; i++) {
312
+
305
- } else if (select[2].value == "②ルート") {
313
+ if (select[i].value == "") {
306
-
307
- selectWrap[3].style.display = "block";
314
+
308
-
309
- attention[2].style.display = "none";
315
+ attention[i].style.display = "block";
310
-
316
+
311
- for (let i = 1; i < 4; i++) {
317
+ }
312
-
313
- children2.getElementsByTagName("option")[i].style.display = "none";
314
318
 
315
319
  }
316
320
 
317
- }
318
-
319
- });
320
-
321
-
322
-
323
- select[3].addEventListener("change", () => {
324
-
325
- if (!(select[2].value == "")) attention[3].style.display = "none";
326
-
327
- });
328
-
329
-
330
-
331
- btn.addEventListener("click", (e) => {
332
-
333
- if (select[1].value == "" && select[0].value == "") {
334
-
335
- attention[0].style.display = "block";
336
-
337
- attention[1].style.display = "block";
338
-
339
321
  e.preventDefault();
340
322
 
341
- } else if (select[1].value == "希望無し" && !(select[0].value == "")) {
342
-
343
- for (let i = 0; i < attentionLen; i++) {
344
-
345
- attention[i].style.display = "none";
346
-
347
- }
348
-
349
- for (let i = 0; i < mustLen; i++) {
350
-
351
- must[i].style.display = "none";
352
-
353
- }
354
-
355
- return true;
356
-
357
- } else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "") {
358
-
359
- setTimeout(() => {
360
-
361
- btn.innerText = "未入力の項目があります"
362
-
363
- }, 200);
364
-
365
- for (let i = 0; i < attentionLen; i++) {
366
-
367
- if (select[i].value == "") {
368
-
369
- attention[i].style.display = "block";
370
-
371
- }
372
-
373
- }
374
-
375
- e.preventDefault();
376
-
377
323
  }
378
324
 
379
325
  });
@@ -386,6 +332,8 @@
386
332
 
387
333
  returnBtn.addEventListener("click", () => {
388
334
 
335
+ busStop.innerText = "";
336
+
389
337
  for (let i = 0; i < mustLen; i++) {
390
338
 
391
339
  must[i].style.display = "inline";

3

書式の改善

2020/12/27 06:50

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -196,8 +196,6 @@
196
196
 
197
197
  <div class="form-control-label" data-formrun-hide-if-confirm>
198
198
 
199
-
200
-
201
199
  <select class="form-control children" id="2" name="停留所">
202
200
 
203
201
  <option value="" selected="selected">停留所を選択してください</option>
@@ -264,6 +262,8 @@
264
262
 
265
263
  const mustLen = must.length
266
264
 
265
+ const children2 = document.getElementsByClassName("children")[1];
266
+
267
267
 
268
268
 
269
269
  select[1].addEventListener("change", () => {
@@ -284,9 +284,37 @@
284
284
 
285
285
  select[2].addEventListener("change", () => {
286
286
 
287
+ for (let i = 1; i < 7; i++) {
288
+
289
+ children2.getElementsByTagName("option")[i].style.display = "block";
290
+
291
+ }
292
+
287
- if (select[2].value == "①ルート" || select[2].value == "②ルート")
293
+ if (select[2].value == "①ルート") {
294
+
288
-
295
+ selectWrap[3].style.display = "block";
296
+
297
+ attention[2].style.display = "none";
298
+
299
+ for (let i = 4; i < 7; i++) {
300
+
289
- selectWrap[3].style.display = "block", attention[2].style.display = "none";
301
+ children2.getElementsByTagName("option")[i].style.display = "none";
302
+
303
+ }
304
+
305
+ } else if (select[2].value == "②ルート") {
306
+
307
+ selectWrap[3].style.display = "block";
308
+
309
+ attention[2].style.display = "none";
310
+
311
+ for (let i = 1; i < 4; i++) {
312
+
313
+ children2.getElementsByTagName("option")[i].style.display = "none";
314
+
315
+ }
316
+
317
+ }
290
318
 
291
319
  });
292
320
 

2

書式の改善

2020/12/25 03:29

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -260,6 +260,10 @@
260
260
 
261
261
  const attentionLen = attention.length;
262
262
 
263
+ const must = document.getElementsByClassName("haveto");
264
+
265
+ const mustLen = must.length
266
+
263
267
 
264
268
 
265
269
  select[1].addEventListener("change", () => {
@@ -308,7 +312,19 @@
308
312
 
309
313
  } else if (select[1].value == "希望無し" && !(select[0].value == "")) {
310
314
 
315
+ for (let i = 0; i < attentionLen; i++) {
316
+
317
+ attention[i].style.display = "none";
318
+
319
+ }
320
+
321
+ for (let i = 0; i < mustLen; i++) {
322
+
311
- document.getElementsByClassName("form")[0].submit();
323
+ must[i].style.display = "none";
324
+
325
+ }
326
+
327
+ return true;
312
328
 
313
329
  } else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "") {
314
330
 
@@ -336,6 +352,22 @@
336
352
 
337
353
 
338
354
 
355
+ const returnBtn = document.getElementsByClassName("btn-secondary")[0];
356
+
357
+
358
+
359
+ returnBtn.addEventListener("click", () => {
360
+
361
+ for (let i = 0; i < mustLen; i++) {
362
+
363
+ must[i].style.display = "inline";
364
+
365
+ }
366
+
367
+ });
368
+
369
+
370
+
339
371
  </script>
340
372
 
341
373
 

1

書式の改善

2020/12/21 00:57

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -4,8 +4,16 @@
4
4
 
5
5
  jqueryを使いたい場合、わからないコードを検索したら比較的簡単に出来ると思います。
6
6
 
7
+
8
+
7
9
  ```html
8
10
 
11
+ <!DOCTYPE html>
12
+
13
+ <html lang="ja">
14
+
15
+
16
+
9
17
  <head>
10
18
 
11
19
  <meta charset="UTF-8">
@@ -258,7 +266,13 @@
258
266
 
259
267
  if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
260
268
 
261
- if (select[1].value == "希望無し") selectWrap[2].style.display = "", selectWrap[3].style.display = "";;
269
+ if (select[1].value == "希望無し") selectWrap[2].style.display = "", selectWrap[3].style.display = "";
270
+
271
+ if (select[1].value == "希望有り" || select[1].value == "希望無し") {
272
+
273
+ attention[1].style.display = "none";
274
+
275
+ }
262
276
 
263
277
  });
264
278
 
@@ -266,12 +280,22 @@
266
280
 
267
281
  select[2].addEventListener("change", () => {
268
282
 
269
- if (select[2].value == "①ルート" || select[2].value == "②ルート") selectWrap[3].style.display = "block";
283
+ if (select[2].value == "①ルート" || select[2].value == "②ルート")
284
+
285
+ selectWrap[3].style.display = "block", attention[2].style.display = "none";
270
286
 
271
287
  });
272
288
 
273
289
 
274
290
 
291
+ select[3].addEventListener("change", () => {
292
+
293
+ if (!(select[2].value == "")) attention[3].style.display = "none";
294
+
295
+ });
296
+
297
+
298
+
275
299
  btn.addEventListener("click", (e) => {
276
300
 
277
301
  if (select[1].value == "" && select[0].value == "") {