回答編集履歴

1

別解追記

2018/11/12 09:19

投稿

x_x
x_x

スコア13749

test CHANGED
@@ -39,3 +39,63 @@
39
39
  // 以下略。
40
40
 
41
41
  ```
42
+
43
+
44
+
45
+ -- 18:13 別解追記。
46
+
47
+ この手のものは template 要素を使えば documentFragment が使えて楽になるのですが、あえて IE を考慮して datalist で作ってみます。
48
+
49
+ ```HTML
50
+
51
+ <datalist id="yaoya">
52
+
53
+ <option value="">選んでください</option>
54
+
55
+ <option>りんご</option>
56
+
57
+ <option>みかん</option>
58
+
59
+ <option>レタス</option>
60
+
61
+ </datalist>
62
+
63
+ <datalist id="sakana">
64
+
65
+ <option value="">選んでください</option>
66
+
67
+ <option>サンマ</option>
68
+
69
+ <option>鯛</option>
70
+
71
+ <option>かつお</option>
72
+
73
+ </datalist>
74
+
75
+ ```
76
+
77
+
78
+
79
+ ```JavaScript
80
+
81
+ otukai.addEventListener('change', function(){
82
+
83
+ var otukai_val = document.getElementById(otukai.value);
84
+
85
+ if (otukai_val) {
86
+
87
+ // kaumono.innerHTML = otukai_val.innerHTML; // 手抜き。
88
+
89
+ kaumono.innerHTML = '';
90
+
91
+ for (var i = 0; i < otukai_val.children.length; i++) {
92
+
93
+ kaumono.add(otukai_val.children[i].cloneNode(true));
94
+
95
+ }
96
+
97
+ }
98
+
99
+ });
100
+
101
+ ```