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

編集履歴

回答編集履歴

5

コード改善

2020/12/27 06:53

投稿

Jon_do
Jon_do

スコア1373

answer CHANGED
@@ -174,6 +174,4 @@
174
174
  </script>
175
175
 
176
176
  </body>
177
-
178
- </html>
179
177
  ```

4

コードの書き換え

2020/12/27 06:53

投稿

Jon_do
Jon_do

スコア1373

answer CHANGED
@@ -1,42 +1,5 @@
1
- 素のJavascriptで書いた一例です。
2
- cssも追加してます。
3
- jqueryを使いたい場合、わからないコードを検索したら比較的簡単に出来ると思います。
4
-
5
1
  ```html
6
- <!DOCTYPE html>
7
- <html lang="ja">
8
-
9
- <head>
10
- <meta charset="UTF-8">
11
- <title>formrun.js - Confirm mode</title>
12
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css"
13
- integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
14
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js"
15
- crossorigin="anonymous"></script>
16
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"
17
- integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD"
18
- crossorigin="anonymous"></script>
19
- <script src="https://sdk.form.run/js/v2/formrun.js"></script>
20
-
21
- <style>
22
- .text-danger {
23
- display: none;
24
- }
25
-
26
- .form-group {
27
- display: none;
28
- }
29
-
30
- .form-group:nth-child(1),
31
- .form-group:nth-child(2) {
32
- display: block;
33
- }
34
- </style>
35
-
36
- </head>
37
-
38
2
  <body>
39
-
40
3
  <div class="container">
41
4
  <h1>formrun.js <small> - Confirm mode</small></h1>
42
5
 
@@ -97,19 +60,22 @@
97
60
  <div class="form-group row">
98
61
  <label class="form-control-label">停留所 <span class="haveto">必須</span></label>
99
62
  <div class="form-control-label" data-formrun-hide-if-confirm>
100
- <select class="form-control children" id="2" name="停留所">
63
+ <select class="form-control children" id="root1" name="停留所">
101
64
  <option value="" selected="selected">停留所を選択してください</option>
102
65
  <option value="交差点先" data-val="①ルート">交差点先</option>
103
66
  <option value="ポルシェ前" data-val="①ルート">ポルシェ前</option>
104
67
  <option value="南郵便局前" data-val="①ルート">南郵便局前</option>
68
+ </select>
69
+ <select class="form-control children" id="root2" name="停留所">
70
+ <option value="" selected="selected">停留所を選択してください</option>
105
71
  <option value="動物病院前" data-val="②ルート">動物病院前</option>
106
72
  <option value="マンション前" data-val="②ルート">マンション前</option>
107
73
  <option value="幼稚園前" data-val="②ルート">幼稚園前</option>
108
74
  </select>
109
75
  <span class="text-danger" data-formrun-show-if-error="停留所">正しく入力してください</span>
110
76
  </div>
111
- <div class="cp_iptxt" data-formrun-show-if-confirm>
77
+ <div class="cp_iptxt">
112
- <span data-formrun-confirm-value="停留所"></span>
78
+ <span class="busStop"></span>
113
79
  </div>
114
80
  </div>
115
81
  <div>
@@ -131,6 +97,9 @@
131
97
  const must = document.getElementsByClassName("haveto");
132
98
  const mustLen = must.length
133
99
  const children2 = document.getElementsByClassName("children")[1];
100
+ const root1 = document.getElementById("root1");
101
+ const root2 = document.getElementById("root2");
102
+ const busStop = document.getElementsByClassName("busStop")[0];
134
103
 
135
104
  select[1].addEventListener("change", () => {
136
105
  if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
@@ -141,21 +110,18 @@
141
110
  });
142
111
 
143
112
  select[2].addEventListener("change", () => {
144
- for (let i = 1; i < 7; i++) {
113
+ select[3].value = "";
145
- children2.getElementsByTagName("option")[i].style.display = "block";
114
+ select[4].value = "";
146
- }
147
115
  if (select[2].value == "①ルート") {
148
116
  selectWrap[3].style.display = "block";
149
117
  attention[2].style.display = "none";
150
- for (let i = 4; i < 7; i++) {
118
+ root1.style.display = "block"
151
- children2.getElementsByTagName("option")[i].style.display = "none";
119
+ root2.style.display = "none"
152
- }
153
120
  } else if (select[2].value == "②ルート") {
154
121
  selectWrap[3].style.display = "block";
155
122
  attention[2].style.display = "none";
156
- for (let i = 1; i < 4; i++) {
157
- children2.getElementsByTagName("option")[i].style.display = "none";
123
+ root1.style.display = "none"
158
- }
124
+ root2.style.display = "block"
159
125
  }
160
126
  });
161
127
 
@@ -164,6 +130,16 @@
164
130
  });
165
131
 
166
132
  btn.addEventListener("click", (e) => {
133
+ for (let i = 0; i < mustLen; i++) {
134
+ must[i].style.display = "none";
135
+ }
136
+
137
+ if (root1.style.display == "block") {
138
+ busStop.innerText = root1.value;
139
+ } else {
140
+ busStop.innerText = root2.value;
141
+ }
142
+
167
143
  if (select[1].value == "" && select[0].value == "") {
168
144
  attention[0].style.display = "block";
169
145
  attention[1].style.display = "block";
@@ -172,11 +148,8 @@
172
148
  for (let i = 0; i < attentionLen; i++) {
173
149
  attention[i].style.display = "none";
174
150
  }
175
- for (let i = 0; i < mustLen; i++) {
176
- must[i].style.display = "none";
177
- }
178
151
  return true;
179
- } else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "") {
152
+ } else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "" && select[4].value == "") {
180
153
  setTimeout(() => {
181
154
  btn.innerText = "未入力の項目があります"
182
155
  }, 200);
@@ -192,6 +165,7 @@
192
165
  const returnBtn = document.getElementsByClassName("btn-secondary")[0];
193
166
 
194
167
  returnBtn.addEventListener("click", () => {
168
+ busStop.innerText = "";
195
169
  for (let i = 0; i < mustLen; i++) {
196
170
  must[i].style.display = "inline";
197
171
  }

3

書式の改善

2020/12/27 06:50

投稿

Jon_do
Jon_do

スコア1373

answer CHANGED
@@ -97,7 +97,6 @@
97
97
  <div class="form-group row">
98
98
  <label class="form-control-label">停留所 <span class="haveto">必須</span></label>
99
99
  <div class="form-control-label" data-formrun-hide-if-confirm>
100
-
101
100
  <select class="form-control children" id="2" name="停留所">
102
101
  <option value="" selected="selected">停留所を選択してください</option>
103
102
  <option value="交差点先" data-val="①ルート">交差点先</option>
@@ -131,6 +130,7 @@
131
130
  const attentionLen = attention.length;
132
131
  const must = document.getElementsByClassName("haveto");
133
132
  const mustLen = must.length
133
+ const children2 = document.getElementsByClassName("children")[1];
134
134
 
135
135
  select[1].addEventListener("change", () => {
136
136
  if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
@@ -141,8 +141,22 @@
141
141
  });
142
142
 
143
143
  select[2].addEventListener("change", () => {
144
+ for (let i = 1; i < 7; i++) {
145
+ children2.getElementsByTagName("option")[i].style.display = "block";
146
+ }
144
- if (select[2].value == "①ルート" || select[2].value == "②ルート")
147
+ if (select[2].value == "①ルート") {
148
+ selectWrap[3].style.display = "block";
149
+ attention[2].style.display = "none";
150
+ for (let i = 4; i < 7; i++) {
145
- selectWrap[3].style.display = "block", attention[2].style.display = "none";
151
+ children2.getElementsByTagName("option")[i].style.display = "none";
152
+ }
153
+ } else if (select[2].value == "②ルート") {
154
+ selectWrap[3].style.display = "block";
155
+ attention[2].style.display = "none";
156
+ for (let i = 1; i < 4; i++) {
157
+ children2.getElementsByTagName("option")[i].style.display = "none";
158
+ }
159
+ }
146
160
  });
147
161
 
148
162
  select[3].addEventListener("change", () => {

2

書式の改善

2020/12/25 03:29

投稿

Jon_do
Jon_do

スコア1373

answer CHANGED
@@ -129,6 +129,8 @@
129
129
  const btn = document.getElementsByClassName("btn-primary")[0];
130
130
  const attention = document.getElementsByClassName("text-danger");
131
131
  const attentionLen = attention.length;
132
+ const must = document.getElementsByClassName("haveto");
133
+ const mustLen = must.length
132
134
 
133
135
  select[1].addEventListener("change", () => {
134
136
  if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
@@ -153,7 +155,13 @@
153
155
  attention[1].style.display = "block";
154
156
  e.preventDefault();
155
157
  } else if (select[1].value == "希望無し" && !(select[0].value == "")) {
158
+ for (let i = 0; i < attentionLen; i++) {
159
+ attention[i].style.display = "none";
160
+ }
161
+ for (let i = 0; i < mustLen; i++) {
156
- document.getElementsByClassName("form")[0].submit();
162
+ must[i].style.display = "none";
163
+ }
164
+ return true;
157
165
  } else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "") {
158
166
  setTimeout(() => {
159
167
  btn.innerText = "未入力の項目があります"
@@ -167,6 +175,14 @@
167
175
  }
168
176
  });
169
177
 
178
+ const returnBtn = document.getElementsByClassName("btn-secondary")[0];
179
+
180
+ returnBtn.addEventListener("click", () => {
181
+ for (let i = 0; i < mustLen; i++) {
182
+ must[i].style.display = "inline";
183
+ }
184
+ });
185
+
170
186
  </script>
171
187
 
172
188
  </body>

1

書式の改善

2020/12/21 00:57

投稿

Jon_do
Jon_do

スコア1373

answer CHANGED
@@ -1,7 +1,11 @@
1
1
  素のJavascriptで書いた一例です。
2
2
  cssも追加してます。
3
3
  jqueryを使いたい場合、わからないコードを検索したら比較的簡単に出来ると思います。
4
+
4
5
  ```html
6
+ <!DOCTYPE html>
7
+ <html lang="ja">
8
+
5
9
  <head>
6
10
  <meta charset="UTF-8">
7
11
  <title>formrun.js - Confirm mode</title>
@@ -128,13 +132,21 @@
128
132
 
129
133
  select[1].addEventListener("change", () => {
130
134
  if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
131
- if (select[1].value == "希望無し") selectWrap[2].style.display = "", selectWrap[3].style.display = "";;
135
+ if (select[1].value == "希望無し") selectWrap[2].style.display = "", selectWrap[3].style.display = "";
136
+ if (select[1].value == "希望有り" || select[1].value == "希望無し") {
137
+ attention[1].style.display = "none";
138
+ }
132
139
  });
133
140
 
134
141
  select[2].addEventListener("change", () => {
135
- if (select[2].value == "①ルート" || select[2].value == "②ルート") selectWrap[3].style.display = "block";
142
+ if (select[2].value == "①ルート" || select[2].value == "②ルート")
143
+ selectWrap[3].style.display = "block", attention[2].style.display = "none";
136
144
  });
137
145
 
146
+ select[3].addEventListener("change", () => {
147
+ if (!(select[2].value == "")) attention[3].style.display = "none";
148
+ });
149
+
138
150
  btn.addEventListener("click", (e) => {
139
151
  if (select[1].value == "" && select[0].value == "") {
140
152
  attention[0].style.display = "block";