質問編集履歴

2

指摘されたので

2021/02/23 11:23

投稿

php_user001
php_user001

スコア5

test CHANGED
File without changes
test CHANGED
@@ -160,154 +160,70 @@
160
160
 
161
161
  <table id="tblForm3">
162
162
 
163
- <thead>
163
+ <tbody>
164
-
164
+
165
- <tr>
165
+ <tr >
166
+
166
-
167
+ <td><p id=num>1</p></td>
168
+
169
+ <td>
170
+
171
+ <select name="lv1" id="lv1Pulldown">
172
+
173
+ <option value="0" selected="selected">▼選択</option>
174
+
175
+ <option value="1">ファッション</option>
176
+
177
+ <option value="2">ドリンク・お酒</option>
178
+
179
+ <option value="3">パソコン・周辺機器</option>
180
+
167
- <th>No</th>
181
+ </select>
168
-
169
- <th>カテゴリ1</th>
182
+
170
-
171
- <th>カテゴリ2</th>
172
-
173
- <th>カテゴリ3</th>
174
-
175
- <th>名前</th>
176
-
177
- <th>メールアドレス</th>
178
-
179
- <th>期限</th>
180
-
181
- <th></th>
183
+ </td>
184
+
185
+ <td>
186
+
187
+ <select name="lv2" id="lv2Pulldown" disabled="disabled">
188
+
189
+ <option value="0">▼選択</option>
190
+
191
+ <option value="4" class="p1">バッグ</option>
192
+
193
+ <option value="5" class="p1">シューズ</option>
194
+
195
+                     <!--割愛 -->
196
+
197
+ </select>
198
+
199
+ </td>
200
+
201
+ <td>
202
+
203
+ <select name="lv3" id="lv3Pulldown" disabled="disabled">
204
+
205
+ <option value="0">▼選択</option>
206
+
207
+ <option value="13" class="p4">アタッシュケース</option>
208
+
209
+ <option value="14" class="p4">ウエスト、ヒップバッグ</option>
210
+
211
+ <option value="15" class="p4">ショルダーバッグ</option>
212
+
213
+ <option value="16" class="p5">ビジネスシューズ</option>
214
+
215
+ <option value="17" class="p5">ローファー</option>
216
+
217
+ <option value="18" class="p5">スニーカー</option>
218
+
219
+ <!--割愛 -->
220
+
221
+ </select>
222
+
223
+ </td>
182
224
 
183
225
  </tr>
184
226
 
185
- </thead>
186
-
187
- <tbody>
188
-
189
- <tr >
190
-
191
- <td><p id=num>1</p></td>
192
-
193
- <td>
194
-
195
- <select name="lv1" id="lv1Pulldown">
196
-
197
- <option value="0" selected="selected">▼選択</option>
198
-
199
- <option value="1">ファッション</option>
200
-
201
- <option value="2">ドリンク・お酒</option>
202
-
203
- <option value="3">パソコン・周辺機器</option>
204
-
205
- </select>
206
-
207
- </td>
208
-
209
- <td>
210
-
211
- <select name="lv2" id="lv2Pulldown" disabled="disabled">
212
-
213
- <option value="0">▼選択</option>
214
-
215
- <option value="4" class="p1">バッグ</option>
216
-
217
- <option value="5" class="p1">シューズ</option>
218
-
219
- <option value="6" class="p1">ファッション小物</option>
220
-
221
- <option value="7" class="p2">ワイン</option>
222
-
223
- <option value="8" class="p2">洋酒</option>
224
-
225
- <option value="9" class="p2">焼酎</option>
226
-
227
- <option value="10" class="p3">タブレットPC</option>
228
-
229
- <option value="11" class="p3">ノートPC</option>
230
-
231
- <option value="12" class="p3">デスクトップPC</option>
232
-
233
- </select>
234
-
235
- </td>
236
-
237
- <td>
238
-
239
- <select name="lv3" id="lv3Pulldown" disabled="disabled">
240
-
241
- <option value="0">▼選択</option>
242
-
243
- <option value="13" class="p4">アタッシュケース</option>
244
-
245
- <option value="14" class="p4">ウエスト、ヒップバッグ</option>
246
-
247
- <option value="15" class="p4">ショルダーバッグ</option>
248
-
249
- <option value="16" class="p5">ビジネスシューズ</option>
250
-
251
- <option value="17" class="p5">ローファー</option>
252
-
253
- <option value="18" class="p5">スニーカー</option>
254
-
255
- <option value="19" class="p6">財布、コインケース</option>
256
-
257
- <option value="20" class="p6">パスケース、定期入れ</option>
258
-
259
- <option value="21" class="p6">名刺入れ</option>
260
-
261
- <option value="22" class="p7">赤ワイン</option>
262
-
263
- <option value="23" class="p7">白ワイン</option>
264
-
265
- <option value="24" class="p7">ロゼワイン</option>
266
-
267
- <option value="25" class="p8">ウィスキー</option>
268
-
269
- <option value="26" class="p8">ブランデー</option>
270
-
271
- <option value="27" class="p8">リキュール</option>
272
-
273
- <option value="28" class="p9">芋焼酎</option>
274
-
275
- <option value="29" class="p9">麦焼酎</option>
276
-
277
- <option value="30" class="p9">米焼酎</option>
278
-
279
- <option value="31" class="p10">Nexus7</option>
280
-
281
- <option value="32" class="p10">iPad</option>
282
-
283
- <option value="33" class="p10">WindowsRT</option>
284
-
285
- <option value="34" class="p11">大型ノート</option>
286
-
287
- <option value="35" class="p11">A4サイズノート</option>
288
-
289
- <option value="36" class="p11">ウルトラブック</option>
290
-
291
- <option value="37" class="p12">モニタ一体型</option>
292
-
293
- <option value="38" class="p12">モニタセパレート型</option>
294
-
295
- <option value="39" class="p12">サーバーマシン</option>
296
-
297
- </select>
298
-
299
- </td>
300
-
301
- <td><input style="width: 150px;" name="name[]" type="text" /></td>
302
-
303
- <td><input style="width: 150px;" name="email[]" type="text" /></td>
304
-
305
- <td><input style="width: 150px;" name="date[]" type="text" /></td>
306
-
307
- <td><button id="delbtn" class="btnDelete" type="button" ><img style="margin-top: 2px;" src="trash.png" alt="ゴミ箱"></button></td>
308
-
309
- </tr>
310
-
311
227
  </tbody>
312
228
 
313
229
  </table>
@@ -328,12 +244,274 @@
328
244
 
329
245
 
330
246
 
331
-
332
-
333
- 参考になる記事や案がございましたらお手数おかけしますが
334
-
335
- 回答よろしくお願いいたします。
336
-
337
-
338
-
339
247
  ![イメージ説明](312e3ed8725cfec2c7f37bd442217878.png)
248
+
249
+
250
+
251
+
252
+
253
+ ### 追記
254
+
255
+
256
+
257
+ その後HTMLに ``` style="display: none;"```
258
+
259
+ を追加しました。加えて追加ボタンを押す事にselectboxに一意のidを付与いたしました。
260
+
261
+
262
+
263
+ ```javascript
264
+
265
+ <script>
266
+
267
+ jQuery(function($) {
268
+
269
+ $("#btnAdd3").on("click", function() {
270
+
271
+ // 最終行ではなく、非表示になっている最初の行なので first-child になっている
272
+
273
+ $("#tblForm3 tbody tr:first-child").clone(true).appendTo("#tblForm3 tbody");
274
+
275
+ // 複製後に表示させる
276
+
277
+ $("#tblForm3 tbody tr:last-child ");
278
+
279
+ $("#tblForm3 tbody tr:last-child ").css("display", "table-row");
280
+
281
+ <!--割愛 -->
282
+
283
+ // selectクラスに(id属性+連番)を付与
284
+
285
+ $(function(){
286
+
287
+ /** select1クラスを持つ要素に連番でID(lv1Pulldown)を付与 */
288
+
289
+ $('.select1').each(function(i){
290
+
291
+ $(this).attr('id', 'lv1Pulldown' + (i));
292
+
293
+ });
294
+
295
+ });
296
+
297
+ $(function(){
298
+
299
+ /** select2クラスを持つ要素に連番でID(lv2Pulldown)を付与 */
300
+
301
+ $('.select2').each(function(i){
302
+
303
+ $(this).attr('id', 'lv2Pulldown' + (i));
304
+
305
+ });
306
+
307
+ });
308
+
309
+ $(function(){
310
+
311
+ /** select3クラスを持つ要素に連番でID(lv3Pulldown)を付与 */
312
+
313
+ $('.select3').each(function(i){
314
+
315
+ $(this).attr('id', 'lv3Pulldown' + (i));
316
+
317
+ });
318
+
319
+ });
320
+
321
+ // 行削除
322
+
323
+ $(".btnDelete").on("click", function() {
324
+
325
+ $(this).parent().parent().remove();
326
+
327
+ });
328
+
329
+ });
330
+
331
+ });
332
+
333
+ </script>
334
+
335
+ <script>
336
+
337
+ $(document).ready(function(){
338
+
339
+ //HTMLの読み込みが完了したら先に各カテゴリのプルダウンのoption内容をコピー
340
+
341
+ var pd2 = $(".select2 option").clone();
342
+
343
+ var pd3 = $(".select3 option").clone();
344
+
345
+
346
+
347
+ // 追加ボタンを押す前の状態各idがlv1Pulldownになり、追加ボタンを押した以降のidはlv1Pulldown1になる
348
+
349
+ // 1→2連動
350
+
351
+ // $('.select1').on('click', function() {
352
+
353
+
354
+
355
+ //var click_id = $(this).attr('id');
356
+
357
+ // var fix = click_id.slice(3);
358
+
359
+
360
+
361
+ $(".select1").change(function () {
362
+
363
+ // selectboxを変更したidとvalue値を取得
364
+
365
+ var cate_id = $(this).attr('id');
366
+
367
+ // console.log(cate_id);
368
+
369
+ var value_id = $(this).val();
370
+
371
+ // 同じ行の第2カテゴリを取得すため「lv1」を削除
372
+
373
+ var str1 = cate_id.slice(3);
374
+
375
+ // 中カテゴリのdisabledを削除
376
+
377
+ $("#lv2"+str1).removeAttr("disabled");
378
+
379
+ // 一旦、同じ行の第2カテゴリのoptionを削除
380
+
381
+ $("#lv2"+str1+" option").remove();
382
+
383
+ // (コピーしていた)元の.select2を表示
384
+
385
+ $(pd2).appendTo("#lv2"+str1);
386
+
387
+ // 選択値以外のクラスのoptionを削除
388
+
389
+ $("#lv2"+str1+" option[class != p"+value_id+"]").remove();
390
+
391
+ // 「▼選択」optionを先頭に表示
392
+
393
+ $("#lv2"+str1).prepend('<option value="0" selected="selected">▼選択</option>');
394
+
395
+ });
396
+
397
+ // });
398
+
399
+ // 2→3連動
400
+
401
+ $(".select2").change(function () {
402
+
403
+ // selectboxを変更したidとvalue値を取得
404
+
405
+ var cate_id2 = $(this).attr('id');
406
+
407
+ var value_id2 = $(this).val();
408
+
409
+ // 同じ行の第3カテゴリを取得すため「lv2」を削除
410
+
411
+ var str2 = cate_id2.slice(3);
412
+
413
+ // 小カテゴリのdisabledを削除
414
+
415
+ $("#lv3"+str2).removeAttr("disabled");
416
+
417
+ // 一旦、同じ行の第3カテゴリのoptionを削除
418
+
419
+ $("#lv3"+str2+" option").remove();
420
+
421
+ // (コピーしていた)元の.select3を表示
422
+
423
+ $(pd3).appendTo("#lv3"+str2);
424
+
425
+ // 選択値以外のクラスのoptionを削除
426
+
427
+ $("#lv3"+str2+" option[class != p"+value_id2+"]").remove();
428
+
429
+ // 「▼選択」optionを先頭に表示
430
+
431
+ $("#lv3"+str2).prepend('<option value="0" selected="selected">▼選択</option>');
432
+
433
+ });
434
+
435
+ });
436
+
437
+ </script>
438
+
439
+ ```
440
+
441
+ ---
442
+
443
+ ```HTML
444
+
445
+
446
+
447
+ <td>
448
+
449
+ <select class="select1" id="lv1Pulldown" name="lv1" >
450
+
451
+ <!--変更なし -->
452
+
453
+ </select>
454
+
455
+ </td>
456
+
457
+ <td>
458
+
459
+ <select name="lv2" class="select2" id="lv2Pulldown" disabled="disabled">
460
+
461
+ <!--変更なし -->
462
+
463
+ </select>
464
+
465
+ </td>
466
+
467
+ <td>
468
+
469
+ <select name="lv3" class="select3" id="lv3Pulldown" disabled="disabled">
470
+
471
+ <option value="0">▼選択</option>
472
+
473
+   <!--変更なし -->
474
+
475
+ </select>
476
+
477
+ </td>
478
+
479
+ <!--変更なし -->
480
+
481
+
482
+
483
+ ```
484
+
485
+
486
+
487
+ ---
488
+
489
+ 挙動は以下のとおりです。
490
+
491
+
492
+
493
+
494
+
495
+ ![イメージ説明](ba2724c4967fcf4a651dc0386e011bc4.png)
496
+
497
+ 原因はscriptの
498
+
499
+ ```ここに言語を入力
500
+
501
+ $(".select1").change(function () {
502
+
503
+           //省略
504
+
505
+ ```
506
+
507
+ ---
508
+
509
+ の時にどのselectboxかを限定出来ていないからだと考えています。
510
+
511
+ よって「最初のselectboxをクリックした時」にどのselectboxかをidで特定さえ出来れば
512
+
513
+ 解決するのかなと考えております。
514
+
515
+
516
+
517
+ その他アドレス等ございましたらお手数おかけしますがよろしくお願いします。

1

質問の修正

2021/02/23 11:23

投稿

php_user001
php_user001

スコア5

test CHANGED
File without changes
test CHANGED
@@ -333,3 +333,7 @@
333
333
  参考になる記事や案がございましたらお手数おかけしますが
334
334
 
335
335
  回答よろしくお願いいたします。
336
+
337
+
338
+
339
+ ![イメージ説明](312e3ed8725cfec2c7f37bd442217878.png)