質問編集履歴
2
回答者様からいただいたアドバイスにそってソースを上書きしました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,11 +4,10 @@
|
|
|
4
4
|
どのようにソースをかけば良いかご教示いただけませんでしょうか。
|
|
5
5
|
|
|
6
6
|
ソースを書かせていただきます。
|
|
7
|
-
|
|
8
7
|
```ここに言語を入力
|
|
9
8
|
<form>
|
|
10
9
|
<div class="pulldownset vegetable">
|
|
11
|
-
<select class="subbox">
|
|
10
|
+
<select id="cate" class="subbox" >
|
|
12
11
|
<option value="">種類を選択</option>
|
|
13
12
|
<option value="ha">葉菜類</option>
|
|
14
13
|
<option value="ne">根菜類</option>
|
|
@@ -44,8 +43,7 @@
|
|
|
44
43
|
</form>
|
|
45
44
|
|
|
46
45
|
|
|
47
|
-
<!--2つめのプルダンで選択したvalueをdivのidに引き継ぎ、表示を切り替えたい
|
|
48
|
-
<div id="ha1">キャベツを選択しました</div>
|
|
46
|
+
<!--<div id="ha1">キャベツを選択しました</div>
|
|
49
47
|
<div id="ha2">ほうれん草を選択しました</div>
|
|
50
48
|
<div id="ha3">レタスを選択しました</div>
|
|
51
49
|
<div id="ne1">大根を選択しました</div>
|
|
@@ -53,7 +51,7 @@
|
|
|
53
51
|
<div id="ne3">ゴボウを選択しました</div>
|
|
54
52
|
<div id="ka1">キュウリを選択しました</div>
|
|
55
53
|
<div id="ka2">カボチャを選択しました</div>
|
|
56
|
-
<div id="ka3">トマトを選択しました</div>
|
|
54
|
+
<div id="ka3">トマトを選択しました</div>-->
|
|
57
55
|
|
|
58
56
|
|
|
59
57
|
<script type="text/javascript">
|
|
@@ -61,33 +59,24 @@
|
|
|
61
59
|
// HTMLの読み込み直後に実行：
|
|
62
60
|
document.addEventListener('DOMContentLoaded', function() {
|
|
63
61
|
|
|
64
|
-
//
|
|
62
|
+
// DOMContentLoaded内
|
|
65
|
-
var allsubbox2es = document.getElementsByClassName("subbox2");
|
|
66
|
-
for( var i=0 ; i<allsubbox2es.length ; i++) {
|
|
67
|
-
allsubbox2es[i].style.display = 'none';
|
|
68
|
-
}
|
|
69
63
|
|
|
70
|
-
//
|
|
64
|
+
// 2. 表示/非表示を一気に更新する（表示条件は、引数と一致する id のサブBOX）
|
|
71
|
-
var mainBoxes = document.getElementsByClassName('pulldownset');
|
|
72
|
-
|
|
65
|
+
var dispSubBox = function(subId) {
|
|
66
|
+
[...document.querySelectorAll(".subbox2")].forEach(function(elm){
|
|
67
|
+
elm.style.display = elm.id===subId ? "inline": "none"
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
dispSubBox(); // 一致する id がないので全て 非表示になる。
|
|
73
71
|
|
|
74
|
-
var subbox = mainBoxes[i].getElementsByClassName("subbox"); // メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。）
|
|
75
|
-
subbox[0].onchange = function () {
|
|
76
|
-
//
|
|
72
|
+
// 1. select.subbox の操作で値が変わると発火するイベント
|
|
77
|
-
|
|
73
|
+
document.getElementById("cate").addEventListener("cange", function(event){
|
|
78
|
-
|
|
74
|
+
var elm = event.target; // select#id になる。
|
|
75
|
+
//console.log( elm.id ); // "cate"
|
|
76
|
+
//console.log( elm.value ); // サブBOXに与えた id と同じ
|
|
79
|
-
|
|
77
|
+
dispSubBox( elm.value ); // 全更新：一致idだけ表示
|
|
80
|
-
}
|
|
78
|
+
});
|
|
81
79
|
|
|
82
|
-
// 指定されたサブBOXを表示する
|
|
83
|
-
if( this.value ) {
|
|
84
|
-
var targetSub = document.getElementById( this.value ); // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
|
|
85
|
-
targetSub.style.display = 'inline';
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
|
|
91
80
|
});
|
|
92
81
|
</script>
|
|
93
82
|
|
1
回答いただいた方のアドバイスによりソースを変更したのですが、いかがでしょうか。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,103 +5,96 @@
|
|
|
5
5
|
|
|
6
6
|
ソースを書かせていただきます。
|
|
7
7
|
|
|
8
|
+
```ここに言語を入力
|
|
9
|
+
<form>
|
|
10
|
+
<div class="pulldownset vegetable">
|
|
11
|
+
<select class="subbox">
|
|
12
|
+
<option value="">種類を選択</option>
|
|
13
|
+
<option value="ha">葉菜類</option>
|
|
14
|
+
<option value="ne">根菜類</option>
|
|
15
|
+
<option value="ka">果菜類</option>
|
|
16
|
+
</select>
|
|
8
17
|
|
|
18
|
+
<select id="ha" class="subbox2">
|
|
19
|
+
<option value="">葉菜類を選択</option>
|
|
20
|
+
<option value="ha1">キャベツ</option>
|
|
21
|
+
<option value="ha2">ほうれん草</option>
|
|
22
|
+
<option value="ha3">レタス</option>
|
|
23
|
+
<option value="ha4">セロリ</option>
|
|
24
|
+
</select>
|
|
9
25
|
|
|
26
|
+
<select id="ne" class="subbox2">
|
|
27
|
+
<option value="">根菜類を選択</option>
|
|
28
|
+
<option value="ne1">大根</option>
|
|
29
|
+
<option value="ne2">にんじん</option>
|
|
30
|
+
<option value="ne3">ゴボウ</option>
|
|
31
|
+
</select>
|
|
10
32
|
|
|
33
|
+
<select id="ka" class="subbox2">
|
|
34
|
+
<option value="">果菜類を選択</option>
|
|
35
|
+
<option value="ka1">キュウリ</option>
|
|
36
|
+
<option value="ka2">カボチャ</option>
|
|
37
|
+
<option value="ka3">トマト</option>
|
|
11
|
-
|
|
38
|
+
</select>
|
|
12
39
|
|
|
40
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
|
41
|
+
</div>
|
|
13
42
|
|
|
14
|
-
<!-- =============================================================== -->
|
|
15
|
-
<!-- ▼2段階プルダウンメニューの例（種類を選択すると詳細が出てくる） -->
|
|
16
|
-
<!-- =============================================================== -->
|
|
17
|
-
<div class="pulldownset vegetable">
|
|
18
|
-
<select class="mainselect">
|
|
19
|
-
<option value="">種類を選択</option>
|
|
20
|
-
<option value="ha">葉菜類</option>
|
|
21
|
-
<option value="ne">根菜類</option>
|
|
22
|
-
<option value="ka">果菜類</option>
|
|
23
|
-
</select>
|
|
24
43
|
|
|
25
|
-
<select id="ha" class="subbox">
|
|
26
|
-
<option value="">葉菜類を選択</option>
|
|
27
|
-
<option value="ha1">キャベツ</option>
|
|
28
|
-
<option value="ha2">ほうれん草</option>
|
|
29
|
-
<option value="ha3">レタス</option>
|
|
30
|
-
<option value="ha4">セロリ</option>
|
|
31
|
-
|
|
44
|
+
</form>
|
|
32
45
|
|
|
33
|
-
<select id="ne" class="subbox">
|
|
34
|
-
<option value="">根菜類を選択</option>
|
|
35
|
-
<option value="ne1">大根</option>
|
|
36
|
-
<option value="ne2">にんじん</option>
|
|
37
|
-
<option value="ne3">ゴボウ</option>
|
|
38
|
-
</select>
|
|
39
46
|
|
|
47
|
+
<!--2つめのプルダンで選択したvalueをdivのidに引き継ぎ、表示を切り替えたい
|
|
40
|
-
|
|
48
|
+
<div id="ha1">キャベツを選択しました</div>
|
|
49
|
+
<div id="ha2">ほうれん草を選択しました</div>
|
|
41
|
-
|
|
50
|
+
<div id="ha3">レタスを選択しました</div>
|
|
51
|
+
<div id="ne1">大根を選択しました</div>
|
|
52
|
+
<div id="ne2">ニンジンを選択しました</div>
|
|
53
|
+
<div id="ne3">ゴボウを選択しました</div>
|
|
42
|
-
|
|
54
|
+
<div id="ka1">キュウリを選択しました</div>
|
|
43
|
-
|
|
55
|
+
<div id="ka2">カボチャを選択しました</div>
|
|
44
|
-
|
|
56
|
+
<div id="ka3">トマトを選択しました</div> -->
|
|
45
|
-
<option value="ka4">ナス</option>
|
|
46
|
-
</select>
|
|
47
57
|
|
|
48
58
|
|
|
49
|
-
|
|
59
|
+
<script type="text/javascript">
|
|
50
60
|
|
|
61
|
+
// HTMLの読み込み直後に実行：
|
|
62
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
51
63
|
|
|
64
|
+
// ▼とりあえずサブBOXを全て非表示にする（CSSで書けば早いが）
|
|
65
|
+
var allsubbox2es = document.getElementsByClassName("subbox2");
|
|
66
|
+
for( var i=0 ; i<allsubbox2es.length ; i++) {
|
|
52
|
-
|
|
67
|
+
allsubbox2es[i].style.display = 'none';
|
|
53
|
-
|
|
68
|
+
}
|
|
54
69
|
|
|
55
|
-
|
|
70
|
+
// ▼全てのプルダウンボックスごとに処理
|
|
71
|
+
var mainBoxes = document.getElementsByClassName('pulldownset');
|
|
56
|
-
|
|
72
|
+
for( var i=0 ; i<mainBoxes.length ; i++) {
|
|
57
|
-
<!-- ▲ここまで -->
|
|
58
|
-
<!-- ========== -->
|
|
59
73
|
|
|
74
|
+
var subbox = mainBoxes[i].getElementsByClassName("subbox"); // メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。）
|
|
75
|
+
subbox[0].onchange = function () {
|
|
76
|
+
// 同じ親要素に含まれている全サブBOXを消す
|
|
77
|
+
var subbox2 = this.parentNode.getElementsByClassName("subbox2"); // 同じ親要素に含まれる.subbox2（※select要素に限らず、どんな要素でも構いません。）
|
|
78
|
+
for( var j=0 ; j<subbox2.length ; j++) {
|
|
79
|
+
subbox2[j].style.display = 'none';
|
|
80
|
+
}
|
|
60
81
|
|
|
82
|
+
// 指定されたサブBOXを表示する
|
|
83
|
+
if( this.value ) {
|
|
84
|
+
var targetSub = document.getElementById( this.value ); // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
|
|
85
|
+
targetSub.style.display = 'inline';
|
|
86
|
+
}
|
|
87
|
+
}
|
|
61
88
|
|
|
89
|
+
}
|
|
62
90
|
|
|
91
|
+
});
|
|
63
|
-
|
|
92
|
+
</script>
|
|
64
93
|
|
|
65
|
-
<!-- ========================================================= -->
|
|
66
|
-
|
|
94
|
+
```
|
|
67
|
-
<!-- ========================================================= -->
|
|
68
|
-
<script type="text/javascript">
|
|
69
95
|
|
|
70
|
-
// HTMLの読み込み直後に実行：
|
|
71
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
72
96
|
|
|
73
|
-
// ▼とりあえずサブBOXを全て非表示にする（CSSで書けば早いが）
|
|
74
|
-
var allSubBoxes = document.getElementsByClassName("subbox");
|
|
75
|
-
for( var i=0 ; i<allSubBoxes.length ; i++) {
|
|
76
|
-
allSubBoxes[i].style.display = 'none';
|
|
77
|
-
}
|
|
78
97
|
|
|
79
|
-
// ▼全てのプルダウンボックスごとに処理
|
|
80
|
-
var mainBoxes = document.getElementsByClassName('pulldownset');
|
|
81
|
-
for( var i=0 ; i<mainBoxes.length ; i++) {
|
|
82
|
-
|
|
83
|
-
var mainSelect = mainBoxes[i].getElementsByClassName("mainselect"); // メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。）
|
|
84
|
-
mainSelect[0].onchange = function () {
|
|
85
|
-
// 同じ親要素に含まれている全サブBOXを消す
|
|
86
|
-
var subBox = this.parentNode.getElementsByClassName("subbox"); // 同じ親要素に含まれる.subbox（※select要素に限らず、どんな要素でも構いません。）
|
|
87
|
-
for( var j=0 ; j<subBox.length ; j++) {
|
|
88
|
-
subBox[j].style.display = 'none';
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// 指定されたサブBOXを表示する
|
|
92
|
-
if( this.value ) {
|
|
93
|
-
var targetSub = document.getElementById( this.value ); // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
|
|
94
|
-
targetSub.style.display = 'inline';
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
});
|
|
101
|
-
</script>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
98
|
例えば、「キャベツ」と選んだら、option valueの「ha1」がdivのidになり
|
|
106
99
|
プルダウンで選択する内容によって切り替わるようにしたいです。
|
|
107
100
|
|