teratail
回答率
85.47%
質問するログイン新規登録
トップRuby on Rails 5に関する質問複数のセレクトボックスにおいて、同じ要素を選択できないようにしたい

編集履歴

回答編集履歴

3

ついか

2018/03/29 09:20

投稿

yambejp
yambejp

スコア114964

test CHANGED
@@ -205,3 +205,131 @@
205
205
  </select>
206
206
 
207
207
  ```
208
+
209
+
210
+
211
+ # 補足
212
+
213
+ デフォルト値がある場合の処理
214
+
215
+
216
+
217
+ ```javascript
218
+
219
+ <script>
220
+
221
+ window.addEventListener('DOMContentLoaded', function(e){
222
+
223
+ var nodes=document.querySelectorAll('.s');
224
+
225
+ Array.prototype.forEach.call(nodes,function(n){
226
+
227
+ n.trigger=function(eventStr){
228
+
229
+ if (document.createEvent) {
230
+
231
+ var e = document.createEvent("HTMLEvents");
232
+
233
+ e.initEvent(eventStr, true, true );
234
+
235
+ return this.dispatchEvent(e);
236
+
237
+ } else {
238
+
239
+ var e = document.createEventObject();
240
+
241
+ return this.fireEvent("on"+eventStr, e);
242
+
243
+ }
244
+
245
+ };
246
+
247
+ n.addEventListener('change',function(){
248
+
249
+ Array.prototype.forEach.call(nodes,function(n){
250
+
251
+ Array.prototype.forEach.call(n.querySelectorAll('option:disabled'),function(n){
252
+
253
+ n.disabled=false;
254
+
255
+ });
256
+
257
+ });
258
+
259
+ Array.prototype.map.call(nodes,function(n){
260
+
261
+ return n.value;
262
+
263
+ }).filter(function(v){
264
+
265
+ return v!=="";
266
+
267
+ }).forEach(function(v){
268
+
269
+ Array.prototype.forEach.call(nodes,function(n){
270
+
271
+ if(n.value!==v) n.querySelector('option[value='+v+']').disabled=true;
272
+
273
+ });
274
+
275
+ });
276
+
277
+ });
278
+
279
+ });
280
+
281
+ nodes[0].trigger('change');
282
+
283
+ });
284
+
285
+ </script>
286
+
287
+ <select name="s1" class="s">
288
+
289
+ <option value="">------</option>
290
+
291
+ <option value="りんご">りんご</option>
292
+
293
+ <option value="みかん">みかん</option>
294
+
295
+ <option value="いちご" selected>いちご</option>
296
+
297
+ <option value="バナナ">バナナ</option>
298
+
299
+ <option value="もも">もも</option>
300
+
301
+ </select>
302
+
303
+ <select name="s2" class="s">
304
+
305
+ <option value="">------</option>
306
+
307
+ <option value="もも">もも</option>
308
+
309
+ <option value="みかん">みかん</option>
310
+
311
+ <option value="バナナ">バナナ</option>
312
+
313
+ <option value="いちご">いちご</option>
314
+
315
+ <option value="りんご" selected>りんご</option>
316
+
317
+ </select>
318
+
319
+ <select name="s3" class="s">
320
+
321
+ <option value="">------</option>
322
+
323
+ <option value="いちご">いちご</option>
324
+
325
+ <option value="みかん" selected>みかん</option>
326
+
327
+ <option value="りんご">りんご</option>
328
+
329
+ <option value="もも">もも</option>
330
+
331
+ <option value="バナナ">バナナ</option>
332
+
333
+ </select>
334
+
335
+ ```

2

追記

2018/03/29 09:20

投稿

yambejp
yambejp

スコア114964

test CHANGED
@@ -101,3 +101,107 @@
101
101
 
102
102
 
103
103
  ```
104
+
105
+
106
+
107
+ # valueの比較バージョン
108
+
109
+
110
+
111
+ ```javascript
112
+
113
+ window.addEventListener('DOMContentLoaded', function(e){
114
+
115
+ var nodes=document.querySelectorAll('.s');
116
+
117
+ Array.prototype.forEach.call(nodes,function(n){
118
+
119
+ n.addEventListener('change',function(){
120
+
121
+ Array.prototype.forEach.call(nodes,function(n){
122
+
123
+ Array.prototype.forEach.call(n.querySelectorAll('option:disabled'),function(n){
124
+
125
+ n.disabled=false;
126
+
127
+ });
128
+
129
+ });
130
+
131
+ Array.prototype.map.call(nodes,function(n){
132
+
133
+ return n.value;
134
+
135
+ }).filter(function(v){
136
+
137
+ return v!=="";
138
+
139
+ }).forEach(function(v){
140
+
141
+ Array.prototype.forEach.call(nodes,function(n){
142
+
143
+ if(n.value!==v) n.querySelector('option[value='+v+']').disabled=true;
144
+
145
+ });
146
+
147
+ });
148
+
149
+ });
150
+
151
+ });
152
+
153
+ });
154
+
155
+ ```
156
+
157
+ ```HTML
158
+
159
+ <select name="s1" class="s">
160
+
161
+ <option value="">------</option>
162
+
163
+ <option value="りんご">りんご</option>
164
+
165
+ <option value="みかん">みかん</option>
166
+
167
+ <option value="いちご">いちご</option>
168
+
169
+ <option value="バナナ">バナナ</option>
170
+
171
+ <option value="もも">もも</option>
172
+
173
+ </select>
174
+
175
+ <select name="s2" class="s">
176
+
177
+ <option value="">------</option>
178
+
179
+ <option value="もも">もも</option>
180
+
181
+ <option value="みかん">みかん</option>
182
+
183
+ <option value="バナナ">バナナ</option>
184
+
185
+ <option value="いちご">いちご</option>
186
+
187
+ <option value="りんご">りんご</option>
188
+
189
+ </select>
190
+
191
+ <select name="s3" class="s">
192
+
193
+ <option value="">------</option>
194
+
195
+ <option value="いちご">いちご</option>
196
+
197
+ <option value="みかん">みかん</option>
198
+
199
+ <option value="りんご">りんご</option>
200
+
201
+ <option value="もも">もも</option>
202
+
203
+ <option value="バナナ">バナナ</option>
204
+
205
+ </select>
206
+
207
+ ```

1

調整

2018/03/29 09:00

投稿

yambejp
yambejp

スコア114964

test CHANGED
@@ -60,6 +60,10 @@
60
60
 
61
61
  <option value="いちご">いちご</option>
62
62
 
63
+ <option value="バナナ">バナナ</option>
64
+
65
+ <option value="もも">もも</option>
66
+
63
67
  </select>
64
68
 
65
69
  <select name="s2" class="s">
@@ -71,6 +75,10 @@
71
75
  <option value="みかん">みかん</option>
72
76
 
73
77
  <option value="いちご">いちご</option>
78
+
79
+ <option value="バナナ">バナナ</option>
80
+
81
+ <option value="もも">もも</option>
74
82
 
75
83
  </select>
76
84
 
@@ -84,6 +92,12 @@
84
92
 
85
93
  <option value="いちご">いちご</option>
86
94
 
95
+ <option value="バナナ">バナナ</option>
96
+
97
+ <option value="もも">もも</option>
98
+
87
99
  </select>
88
100
 
101
+
102
+
89
103
  ```