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

質問編集履歴

2

誤字修正

2019/03/25 06:39

投稿

gobindar
gobindar

スコア51

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
  ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。
5
5
 
6
6
  ### 質問内容
7
- 下記のエラーが出現して困っています。
7
+ 下記のエラーが出現して困っています。
8
8
  (特定のクラスを全てvisibleもしくはhiddenにしたいです)
9
9
  どこが誤っていますでしょうか?
10
10
 

1

背景などの追加

2019/03/25 06:39

投稿

gobindar
gobindar

スコア51

title CHANGED
File without changes
body CHANGED
@@ -3,11 +3,22 @@
3
3
  環境はmac OS Mojave10.14.2
4
4
  ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。
5
5
 
6
+ ### 質問内容
6
- 下記のエラーが出現して困っています。
7
+ 下記のエラーが出現して困っています。
7
8
  (特定のクラスを全てvisibleもしくはhiddenにしたいです)
8
9
  どこが誤っていますでしょうか?
9
10
 
11
+ 尚、エラーではクラス「visible_check」に関してエラーが出ていて、
12
+ このクラスはviewには1つしかありませんが、
13
+ この後
14
+ ```javascript
15
+ document.getElementsByClassName("."+(i+1)"_"+old[i-1]).style.visibility ="visible";
16
+ ```
17
+ の部分で、viewに複数箇所あるクラスに対してvisibleを設定しようと考えています。
18
+ (ループしている理由は、最下部背景の通り、階層のold値からvisible/hiddenを設定したいからです)
19
+ なので、タイトルは「特定のクラスを持つselect option を全て非表示にしたい」としております。
10
20
 
21
+
11
22
  ### エラー内容
12
23
  ```
13
24
  Uncaught TypeError: Cannot set property 'visibility' of undefined
@@ -62,4 +73,35 @@
62
73
 
63
74
  ```
64
75
 
76
+ 以下、本件の背景です。
77
+ ### 実装しているもの
78
+ ・今実装している画面には全選択肢が全て見えているセレクトボックスが5つあります。
79
+ ・セレクトボックスはcascadingで、第一階層のセレクトボックスを選択すると、
80
+ それに合わせて第二階層のセレクトボックスとその内容が出現し、選択できるというようになっています。
81
+ ・各セレクトボックスはview側でforeachを回して全て選択肢やセレクトボックスを用意しています。
82
+
83
+ <セレクトボックスの出現制御>
84
+  javascriptによるdisplay制御で、見える見えないの制御をしています。
85
+  (例えば、第一階層までしか選択していない時は、display制御で第三階層を見せていない
86
+  だけで、view側にはある)
87
+
88
+ <選択肢の出現制御>
89
+ ・セレクトボックスの選択肢(option)のvalueには一意の番号が振ってあります
90
+ ・各セレクトボックスの選択肢(option)は、親の番号を持っているので、
91
+ 最初の階層で選択された選択肢の番号に応じて、次の階層で選択肢を変更します
92
+
93
+ <参考>
94
+ 下記のデモは構築中のものと非常に似ていて、
95
+ 3階層が常に見えていますが、
96
+ 1階層目を選択すると2階層目が見えて…のようになる違いがあります。
97
+ (選択肢の見え方・制御は同じです)
98
+ https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Dependent-Select-Boxes-Filter-Select/
99
+
100
+ ### やりたいこと
101
+ この上で、入力画面から次の画面に
102
+ 行き、戻るボタンから戻ってきた際に、
103
+ optionのold値にある値から、
104
+ 入力画面で入力したときと同じように画面を
105
+ 再現すべく、当質問に至りました。
106
+
65
107
  宜しくお願い致します。