teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問連動プルダウン　選択した値によって表示を切り替えたい

編集履歴

質問編集履歴

2

回答者様からいただいたアドバイスにそってソースを上書きしました。

2020/05/15 06:23

投稿

mikiko
mikiko

スコア11

test CHANGED
File without changes
test CHANGED
@@ -10,15 +10,13 @@
10
10
 
11
11
  ソースを書かせていただきます。
12
12
 
13
-
14
-
15
13
  ```ここに言語を入力
16
14
 
17
15
  <form>
18
16
 
19
17
  <div class="pulldownset vegetable">
20
18
 
21
- <select class="subbox">
19
+ <select id="cate" class="subbox" >
22
20
 
23
21
  <option value="">種類を選択</option>
24
22
 
@@ -90,9 +88,7 @@
90
88
 
91
89
 
92
90
 
93
- <!--2つめのプルダンで選択したvalueをdivのidに引き継ぎ、表示を切り替えたい
94
-
95
- <div id="ha1">キャベツを選択しました</div>　
91
+ <!--<div id="ha1">キャベツを選択しました</div>　
96
92
 
97
93
  <div id="ha2">ほうれん草を選択しました</div>　
98
94
 
@@ -108,7 +104,7 @@
108
104
 
109
105
  <div id="ka2">カボチャを選択しました</div>　
110
106
 
111
- <div id="ka3">トマトを選択しました</div>　-->
107
+ <div id="ka3">トマトを選択しました</div>-->
112
108
 
113
109
 
114
110
 
@@ -124,57 +120,39 @@
124
120
 
125
121
 
126
122
 
127
- // ▼とりあえずサブBOXを全て非表示にする（CSSで書けば早いが）
123
+ // DOMContentLoaded内
128
-
129
- var allsubbox2es = document.getElementsByClassName("subbox2");
130
-
131
- for( var i=0 ; i<allsubbox2es.length ; i++) {
132
-
133
- allsubbox2es[i].style.display = 'none';
134
-
135
- }
136
124
 
137
125
 
138
126
 
139
- // ▼全てのプルダウンボックスごとに処理
127
+ // 2. 表示/非表示を一気に更新する（表示条件は、引数と一致する id のサブBOX）
140
128
 
141
- var mainBoxes = document.getElementsByClassName('pulldownset');
129
+ var dispSubBox = function(subId) {
142
130
 
131
+ [...document.querySelectorAll(".subbox2")].forEach(function(elm){
132
+
133
+ elm.style.display = elm.id===subId ? "inline": "none"
134
+
135
+ });
136
+
137
+ }
138
+
143
- for( var i=0 ; i<mainBoxes.length ; i++) {
139
+ dispSubBox(); // 一致する id がないので全て 非表示になる。
144
140
 
145
141
 
146
142
 
147
- var subbox = mainBoxes[i].getElementsByClassName("subbox"); // メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。）
143
+ // 1. select.subbox の操作で値が変わると発火するイベント
148
144
 
149
- subbox[0].onchange = function () {
145
+ document.getElementById("cate").addEventListener("cange", function(event){
150
146
 
151
- // 同じ親要素に含まれている全サブBOXを消す
147
+ var elm = event.target; // select#id になる。
152
148
 
153
- var subbox2 = this.parentNode.getElementsByClassName("subbox2"); // 同じ親要素に含まれる.subbox2（※select要素に限らず、どんな要素でも構いません。）
149
+ //console.log( elm.id ); // "cate"
154
150
 
155
- for( var j=0 ; j<subbox2.length ; j++) {
151
+ //console.log( elm.value ); // サブBOXに与えた id と同じ
156
152
 
157
- subbox2[j].style.display = 'none';
153
+ dispSubBox( elm.value ); // 全更新：一致idだけ表示
158
154
 
159
- }
155
+ });
160
-
161
-
162
-
163
- // 指定されたサブBOXを表示する
164
-
165
- if( this.value ) {
166
-
167
- var targetSub = document.getElementById( this.value ); // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
168
-
169
- targetSub.style.display = 'inline';
170
-
171
- }
172
-
173
- }
174
-
175
-
176
-
177
- }
178
156
 
179
157
 
180
158
 

1

回答いただいた方のアドバイスによりソースを変更したのですが、いかがでしょうか。

2020/05/15 06:23

投稿

mikiko
mikiko

スコア11

test CHANGED
File without changes
test CHANGED
@@ -12,193 +12,179 @@
12
12
 
13
13
 
14
14
 
15
-
16
-
17
-
18
-
19
-
20
-
21
- <form>
22
-
23
-
24
-
25
-
26
-
27
- <!-- =============================================================== -->
28
-
29
- <!-- ▼2段階プルダウンメニューの例（種類を選択すると詳細が出てくる） -->
30
-
31
- <!-- =============================================================== -->
32
-
33
- <div class="pulldownset vegetable">
34
-
35
- <select class="mainselect">
36
-
37
- <option value="">種類を選択</option>
38
-
39
- <option value="ha">葉菜類</option>
40
-
41
- <option value="ne">根菜類</option>
42
-
43
- <option value="ka">果菜類</option>
44
-
45
- </select>
46
-
47
-
48
-
49
- <select id="ha" class="subbox">
50
-
51
- <option value="">葉菜類を選択</option>
52
-
53
- <option value="ha1">キャベツ</option>
54
-
55
- <option value="ha2">ほうれん草</option>
56
-
57
- <option value="ha3">レタス</option>
58
-
59
- <option value="ha4">セロリ</option>
60
-
61
- </select>
62
-
63
-
64
-
65
- <select id="ne" class="subbox">
66
-
67
- <option value="">根菜類を選択</option>
68
-
69
- <option value="ne1">大根</option>
70
-
71
- <option value="ne2">にんじん</option>
72
-
73
- <option value="ne3">ゴボウ</option>
74
-
75
- </select>
76
-
77
-
78
-
79
- <select id="ka" class="subbox">
80
-
81
- <option value="">果菜類を選択</option>
82
-
83
- <option value="ka1">キュウリ</option>
84
-
85
- <option value="ka2">カボチャ</option>
86
-
87
- <option value="ka3">トマト</option>
88
-
89
- <option value="ka4">ナス</option>
90
-
91
- </select>
92
-
93
-
94
-
95
-
96
-
97
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
98
-
99
-
100
-
101
-
102
-
103
- <div id=""></div>　
104
-
105
- <!--2つめのプルダンで選択したvalueをdivのidに引き継ぎ、表示を切り替えたい-->
106
-
107
-
108
-
109
- </div>
110
-
111
- <!-- ========== -->
112
-
113
- <!-- ▲ここまで -->
114
-
115
- <!-- ========== -->
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
- </form>
126
-
127
-
128
-
129
- <!-- ========================================================= -->
130
-
131
- <!-- ▼2段階の連動プルダウンメニューを実現するJavaScriptソース -->
132
-
133
- <!-- ========================================================= -->
134
-
135
- <script type="text/javascript">
136
-
137
-
138
-
139
- // HTMLの読み込み直後に実行：
140
-
141
- document.addEventListener('DOMContentLoaded', function() {
142
-
143
-
144
-
145
- // ▼とりあえずサブBOXを全て非表示にする（CSSで書けば早いが）
146
-
147
- var allSubBoxes = document.getElementsByClassName("subbox");
148
-
149
- for( var i=0 ; i<allSubBoxes.length ; i++) {
150
-
151
- allSubBoxes[i].style.display = 'none';
152
-
153
- }
154
-
155
-
156
-
157
- // ▼全てのプルダウンボックスごとに処理
158
-
159
- var mainBoxes = document.getElementsByClassName('pulldownset');
160
-
161
- for( var i=0 ; i<mainBoxes.length ; i++) {
162
-
163
-
164
-
165
- var mainSelect = mainBoxes[i].getElementsByClassName("mainselect"); // メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。）
166
-
167
- mainSelect[0].onchange = function () {
168
-
169
- // 同じ親要素に含まれている全サブBOXを消す
170
-
171
- var subBox = this.parentNode.getElementsByClassName("subbox"); // 同じ親要素に含まれる.subbox（※select要素に限らず、どんな要素でも構いません。）
172
-
173
- for( var j=0 ; j<subBox.length ; j++) {
174
-
175
- subBox[j].style.display = 'none';
176
-
177
- }
178
-
179
-
180
-
181
- // 指定されたサブBOXを表示する
182
-
183
- if( this.value ) {
184
-
185
- var targetSub = document.getElementById( this.value ); // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
186
-
187
- targetSub.style.display = 'inline';
188
-
189
- }
190
-
191
- }
192
-
193
-
194
-
195
- }
196
-
197
-
198
-
199
- });
200
-
201
- </script>
15
+ ```ここに言語を入力
16
+
17
+ <form>
18
+
19
+ <div class="pulldownset vegetable">
20
+
21
+ <select class="subbox">
22
+
23
+ <option value="">種類を選択</option>
24
+
25
+ <option value="ha">葉菜類</option>
26
+
27
+ <option value="ne">根菜類</option>
28
+
29
+ <option value="ka">果菜類</option>
30
+
31
+ </select>
32
+
33
+
34
+
35
+ <select id="ha" class="subbox2">
36
+
37
+ <option value="">葉菜類を選択</option>
38
+
39
+ <option value="ha1">キャベツ</option>
40
+
41
+ <option value="ha2">ほうれん草</option>
42
+
43
+ <option value="ha3">レタス</option>
44
+
45
+ <option value="ha4">セロリ</option>
46
+
47
+ </select>
48
+
49
+
50
+
51
+ <select id="ne" class="subbox2">
52
+
53
+ <option value="">根菜類を選択</option>
54
+
55
+ <option value="ne1">大根</option>
56
+
57
+ <option value="ne2">にんじん</option>
58
+
59
+ <option value="ne3">ゴボウ</option>
60
+
61
+ </select>
62
+
63
+
64
+
65
+ <select id="ka" class="subbox2">
66
+
67
+ <option value="">果菜類を選択</option>
68
+
69
+ <option value="ka1">キュウリ</option>
70
+
71
+ <option value="ka2">カボチャ</option>
72
+
73
+ <option value="ka3">トマト</option>
74
+
75
+ </select>
76
+
77
+
78
+
79
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
80
+
81
+ </div>
82
+
83
+
84
+
85
+
86
+
87
+ </form>
88
+
89
+
90
+
91
+
92
+
93
+ <!--2つめのプルダンで選択したvalueをdivのidに引き継ぎ、表示を切り替えたい
94
+
95
+ <div id="ha1">キャベツを選択しました</div>　
96
+
97
+ <div id="ha2">ほうれん草を選択しました</div>　
98
+
99
+ <div id="ha3">レタスを選択しました</div>　
100
+
101
+ <div id="ne1">大根を選択しました</div>　
102
+
103
+ <div id="ne2">ニンジンを選択しました</div>　
104
+
105
+ <div id="ne3">ゴボウを選択しました</div>　
106
+
107
+ <div id="ka1">キュウリを選択しました</div>　
108
+
109
+ <div id="ka2">カボチャを選択しました</div>　
110
+
111
+ <div id="ka3">トマトを選択しました</div>　-->
112
+
113
+
114
+
115
+
116
+
117
+ <script type="text/javascript">
118
+
119
+
120
+
121
+ // HTMLの読み込み直後に実行：
122
+
123
+ document.addEventListener('DOMContentLoaded', function() {
124
+
125
+
126
+
127
+ // ▼とりあえずサブBOXを全て非表示にする（CSSで書けば早いが）
128
+
129
+ var allsubbox2es = document.getElementsByClassName("subbox2");
130
+
131
+ for( var i=0 ; i<allsubbox2es.length ; i++) {
132
+
133
+ allsubbox2es[i].style.display = 'none';
134
+
135
+ }
136
+
137
+
138
+
139
+ // ▼全てのプルダウンボックスごとに処理
140
+
141
+ var mainBoxes = document.getElementsByClassName('pulldownset');
142
+
143
+ for( var i=0 ; i<mainBoxes.length ; i++) {
144
+
145
+
146
+
147
+ var subbox = mainBoxes[i].getElementsByClassName("subbox"); // メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。）
148
+
149
+ subbox[0].onchange = function () {
150
+
151
+ // 同じ親要素に含まれている全サブBOXを消す
152
+
153
+ var subbox2 = this.parentNode.getElementsByClassName("subbox2"); // 同じ親要素に含まれる.subbox2（※select要素に限らず、どんな要素でも構いません。）
154
+
155
+ for( var j=0 ; j<subbox2.length ; j++) {
156
+
157
+ subbox2[j].style.display = 'none';
158
+
159
+ }
160
+
161
+
162
+
163
+ // 指定されたサブBOXを表示する
164
+
165
+ if( this.value ) {
166
+
167
+ var targetSub = document.getElementById( this.value ); // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
168
+
169
+ targetSub.style.display = 'inline';
170
+
171
+ }
172
+
173
+ }
174
+
175
+
176
+
177
+ }
178
+
179
+
180
+
181
+ });
182
+
183
+ </script>
184
+
185
+
186
+
187
+ ```
202
188
 
203
189
 
204
190