回答編集履歴

3

jQuery

2019/01/21 08:19

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -195,3 +195,29 @@
195
195
  ```
196
196
 
197
197
  ※datasetはブラウザによって微妙なのでgetAttributeしておきました
198
+
199
+
200
+
201
+ # jQuery版
202
+
203
+
204
+
205
+ ```javascript
206
+
207
+ $(function(){
208
+
209
+ $('#group').on('change',function(){
210
+
211
+ var self=$(this);
212
+
213
+ $('#corporation option').prop('disabled',function(){
214
+
215
+ return !(self.val()=="all" || $(this).val()=="all" || $(this).data('val')==self.val());
216
+
217
+ });
218
+
219
+ });
220
+
221
+ });
222
+
223
+ ```

2

コピペ版

2019/01/21 08:19

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -96,11 +96,21 @@
96
96
 
97
97
 
98
98
 
99
- # 追記
99
+ # disabled版
100
100
 
101
101
  単純にcorporationのoptionのdisabledを付け替えたいだけならこう
102
102
 
103
+ 以下のみをコピペして確認してください
104
+
105
+ (なにかに組み込むとかまずは忘れてください)
106
+
103
107
  ```javascript
108
+
109
+ <html>
110
+
111
+ <head>
112
+
113
+ <script>
104
114
 
105
115
  window.addEventListener('DOMContentLoaded', function(e){
106
116
 
@@ -118,6 +128,70 @@
118
128
 
119
129
  });
120
130
 
131
+ </script>
132
+
133
+ </head>
134
+
135
+ <body>
136
+
137
+ <select name="group" id="group" class="group">
138
+
139
+ <option value="all">all</option>
140
+
141
+ <option value="0">グループなし</option>
142
+
143
+ <option value="1" >テストグループ1</option>
144
+
145
+ <option value="2" >テストグループ2</option>
146
+
147
+ <option value="3" >テストグループ3</option>
148
+
149
+ <option value="4" >テストグループ4</option>
150
+
151
+ <option value="5" >テストグループ4</option>
152
+
153
+ <option value="6" >テストグループ5</option>
154
+
155
+ <option value="7" >テストグループ6</option>
156
+
157
+ <option value="13" >テストグループ7</option>
158
+
159
+ <option value="14" >テストグループ8</option>
160
+
161
+ </select>
162
+
163
+ <select name="corporation" id="corporation" class="corporation">
164
+
165
+ <option value="all">all</option>
166
+
167
+ <option value="584" data-val="1" >テスト法人1-1</option>
168
+
169
+ <option value="585" data-val="0" >テスト法人1-2</option>
170
+
171
+ <option value="586" data-val="1" >テスト法人2-1</option>
172
+
173
+ <option value="587" data-val="14" >テスト法人2-2</option>
174
+
175
+ <option value="588" data-val="5" >テスト法人3-1</option>
176
+
177
+ <option value="589" data-val="13" >テスト法人4-1</option>
178
+
179
+ <option value="590" data-val="6" >テスト法人4-2</option>
180
+
181
+ <option value="591" data-val="7" >テスト法人5-1</option>
182
+
183
+ <option value="592" data-val="7" >テスト法人5-2</option>
184
+
185
+ <option value="593" data-val="1" >テスト法人6-1</option>
186
+
187
+ <option value="594" data-val="2" >テスト法人6-2</option>
188
+
189
+ </select>
190
+
191
+ </body>
192
+
193
+ </html>
194
+
121
195
  ```
122
196
 
123
197
  ※datasetはブラウザによって微妙なのでgetAttributeしておきました

1

tuiki

2019/01/21 03:37

投稿

yambejp
yambejp

スコア114843

test CHANGED
@@ -93,3 +93,31 @@
93
93
  </select>
94
94
 
95
95
  ```
96
+
97
+
98
+
99
+ # 追記
100
+
101
+ 単純にcorporationのoptionのdisabledを付け替えたいだけならこう
102
+
103
+ ```javascript
104
+
105
+ window.addEventListener('DOMContentLoaded', function(e){
106
+
107
+ document.querySelector('#group').addEventListener('change',function(e){
108
+
109
+ var t=e.target;
110
+
111
+ [].forEach.call(document.querySelectorAll('#corporation option'),function(x){
112
+
113
+ x.disabled=!(x.value=="all" || t.value=="all" || x.getAttribute("data-val")==t.value);
114
+
115
+ });
116
+
117
+ });
118
+
119
+ });
120
+
121
+ ```
122
+
123
+ ※datasetはブラウザによって微妙なのでgetAttributeしておきました