質問編集履歴
2
北海道が2行あったため不要部分の削除をしました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -46,14 +46,6 @@
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
|
-
<select id="北海道" name="ken" class="subbox">
|
|
50
|
-
|
|
51
|
-
<option value="">北海道</option>
|
|
52
|
-
|
|
53
|
-
</select>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
49
|
<select id="東北" name="ken" class="subbox">
|
|
58
50
|
|
|
59
51
|
<option value="">東北地方を選択</option>
|
1
Javascriptが抜けていたため追記いたしました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
|
|
21
21
|
```HTML
|
|
22
22
|
|
|
23
|
+
<form method="GET" action="buisearch.php">
|
|
24
|
+
|
|
23
25
|
<div class="mainclass cityward">
|
|
24
26
|
|
|
25
27
|
<select class="mainselect">
|
|
@@ -196,7 +198,81 @@
|
|
|
196
198
|
|
|
197
199
|
<option value="沖縄">沖縄県</option>
|
|
198
200
|
|
|
201
|
+
</select><br>
|
|
202
|
+
|
|
203
|
+
<script type="text/javascript">
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
// HTMLの読み込み直後に実行：
|
|
208
|
+
|
|
209
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
// ▼とりあえずサブBOXを全て非表示にする（CSSで書けば早いが）
|
|
214
|
+
|
|
215
|
+
var allSubBoxes = document.getElementsByClassName("subbox");
|
|
216
|
+
|
|
217
|
+
for( var i=0 ; i<allSubBoxes.length ; i++) {
|
|
218
|
+
|
|
219
|
+
allSubBoxes[i].style.display = 'none';
|
|
220
|
+
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
// ▼全てのプルダウンボックスごとに処理
|
|
226
|
+
|
|
227
|
+
var mainBoxes = document.getElementsByClassName('mainclass');
|
|
228
|
+
|
|
229
|
+
for( var i=0 ; i<mainBoxes.length ; i++) {
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
var mainSelect = mainBoxes[i].getElementsByClassName("mainselect"); // メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。）
|
|
234
|
+
|
|
235
|
+
mainSelect[0].onchange = function () {
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
// 同じ親要素に含まれている全サブBOXを消す
|
|
240
|
+
|
|
241
|
+
var subBox = this.parentNode.getElementsByClassName("subbox"); // 同じ親要素に含まれる.subbox（※select要素に限らず、どんな要素でも構いません。）
|
|
242
|
+
|
|
243
|
+
for( var j=0 ; j<subBox.length ; j++) {
|
|
244
|
+
|
|
245
|
+
subBox[j].style.display = 'none';
|
|
246
|
+
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
// 指定されたサブBOXを表示する
|
|
252
|
+
|
|
253
|
+
if( this.value ) {
|
|
254
|
+
|
|
255
|
+
var targetSub = document.getElementById( this.value ); // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
|
|
256
|
+
|
|
257
|
+
targetSub.style.display = 'inline';
|
|
258
|
+
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
});
|
|
270
|
+
|
|
199
|
-
</s
|
|
271
|
+
</script>
|
|
272
|
+
|
|
273
|
+
<input type="submit" value="検索">
|
|
274
|
+
|
|
275
|
+
</form>
|
|
200
276
|
|
|
201
277
|
```
|
|
202
278
|
|