teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードを追加しました

2018/05/25 06:39

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -9,4 +9,59 @@
9
9
  も見たのですが、プルダウン項目を3つつけたところ、機能しませんでした。
10
10
 
11
11
  出来ればシンプルに作りたいです。
12
- 参考にできるサイトを探しています。ご教授願います。
12
+ 参考にできるサイトを探しています。ご教授願います。
13
+
14
+ 恥ずかしながら<form>しか書いていません。
15
+ 例えば、製品1と製品2と製品3を選択したら
16
+ カラーと素材のitem1~3が表示され、item4,5が非表示になるようにしたいです。
17
+
18
+ ```ここに言語を入力
19
+ <div class="compare">
20
+ <form>
21
+  <select>
22
+   <option value="item1" selected>製品1</option>
23
+   <option value="item2">製品2</option>
24
+   <option value="item3">製品3</option>
25
+   <option value="item4">製品4</option>
26
+   <option value="item5">製品5</option>
27
+  </select>
28
+
29
+  <select>
30
+   <option value="item1">製品1</option>
31
+   <option value="item2" selected>製品2</option>
32
+   <option value="item3">製品3</option>
33
+   <option value="item4">製品4</option>
34
+   <option value="item5">製品5</option>
35
+  </select>
36
+
37
+  <select>
38
+   <option value="item1">製品1</option>
39
+   <option value="item2">製品2</option>
40
+   <option value="item3" selected>製品3</option>
41
+   <option value="item4">製品4</option>
42
+   <option value="item5">製品5</option>
43
+  </select>
44
+ </form>
45
+
46
+ <div>カラー</div>
47
+ <div>
48
+ <div data-content="item1">~~製品1のカラー~~</div>
49
+ <div data-content="item2">~~製品2のカラー~~</div>
50
+ <div data-content="item3">~~製品3のカラー~~</div>
51
+ <div data-content="item4">~~製品4のカラー~~</div>
52
+ <div data-content="item5">~~製品5のカラー~~</div>
53
+ </div>
54
+
55
+ <div>素材</div>
56
+ <div>
57
+ <div data-content="item1">~~製品1の素材~~</div>
58
+ <div data-content="item2">~~製品2の素材~~</div>
59
+ <div data-content="item3">~~製品3の素材~~</div>
60
+ <div data-content="item4">~~製品4の素材~~</div>
61
+ <div data-content="item5">~~製品5の素材~~</div>
62
+ </div>
63
+
64
+
65
+
66
+ </div><!--compare end-->
67
+ ```