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

質問編集履歴

4

修正のため

2020/09/13 08:48

投稿

chapp
chapp

スコア233

title CHANGED
File without changes
body CHANGED
@@ -92,4 +92,4 @@
92
92
 
93
93
  現状での不都合は、子カテゴリに「disabled」が設定されているため、子カテゴリのデータが選択されているときは「disabled」を外すことは出来るものの、親カテゴリと関連のない子データ、要は全てのデータが表示されてしまう状況です。
94
94
 
95
- また、子カテゴリのデータが存在する場合、PHPでテーブルからの子カテゴリの取得範囲を制限するも、親カテゴリを変えると、子カテゴリが表示されない状況となってしまいます。
95
+ これを防ごうと子カテゴリのデータが存在する場合、テーブルからの子カテゴリの取得範囲を制限するも、PHPで行っているため、親カテゴリを変えると、子カテゴリが表示されない状況となってしまいます。

3

修正のため

2020/09/13 08:48

投稿

chapp
chapp

スコア233

title CHANGED
File without changes
body CHANGED
@@ -90,4 +90,6 @@
90
90
 
91
91
  ```
92
92
 
93
- 現状での不都合は、子カテゴリに「disabled」が設定されているため、子カテゴリのデータが選択されているときは「disabled」を外すことは出来るものの、親カテゴリと関連のない子データ、要は全てのデータが表示されてしまう状況です。
93
+ 現状での不都合は、子カテゴリに「disabled」が設定されているため、子カテゴリのデータが選択されているときは「disabled」を外すことは出来るものの、親カテゴリと関連のない子データ、要は全てのデータが表示されてしまう状況です。
94
+
95
+ また、子カテゴリのデータが存在する場合、PHPでテーブルからの子カテゴリの取得範囲を制限するも、親カテゴリを変えると、子カテゴリが表示されない状況となってしまいます。

2

修正のため

2020/09/13 08:35

投稿

chapp
chapp

スコア233

title CHANGED
File without changes
body CHANGED
@@ -35,7 +35,7 @@
35
35
  </select>
36
36
 
37
37
 
38
- <select class="children" name="s_cate" size="12" disabled>
38
+ <select class="children" name="s_cate" size="12" <?php echo $disabled; ?>>
39
39
  <option value = "">選択してください</option>
40
40
  <option value="1" data-val="1" class="py-1 border-top" >ハウスクリーニング</option>
41
41
  <option value="2" data-val="1" class="py-1 border-top" >ルームクリーニング</option>

1

追記のため

2020/09/13 08:26

投稿

chapp
chapp

スコア233

title CHANGED
File without changes
body CHANGED
@@ -14,4 +14,80 @@
14
14
  前述の通り、基本PHPで作っているため、プルダウンで選択したデータはPHPで取得し変数に入れる仕組みとしており、単純にPHPの変数に入っているデータからselectedとしてしまうと、2つ目のプルダウンに関東以外の項目も選択可能と、おかしくなってしまったりで・・・
15
15
 
16
16
  お忙しいなか恐縮ですが、ご教示のほどお願い出来たら幸いです。
17
- よろしくお願いいたします。
17
+ よろしくお願いいたします。
18
+
19
+
20
+
21
+ ■現在のコード
22
+ プルダウンデータはDBから取得しているので、以下はHTML出力した際のもので、親カテゴリの「リフォーム(室内)」、子カテゴリの「壁紙(クロス)張替え」を選択し、POSTしたときのHTMLです。
23
+
24
+ PHP、およびSQL(create table、inseart文)を張り付けるべきか悩みましたが、長くなるのでHTMLを記載した次第です。
25
+
26
+ ```
27
+
28
+ <select class="parent" name="m_cate" size="12">
29
+ <option value = "">選択してください</option>
30
+ <option value="1" class="py-1 border-top" selected>クリーニング</option>
31
+ <option value="2" class="py-1 border-top" >リフォーム(室内)</option>
32
+ <option value="3" class="py-1 border-top" >リフォーム(室外)</option>
33
+ <option value="4" class="py-1 border-top" >家電(設備)の取付け・修理</option>
34
+ <option value="5" class="py-1 border-top" >水道修理・メンテナンス</option>
35
+ </select>
36
+
37
+
38
+ <select class="children" name="s_cate" size="12" disabled>
39
+ <option value = "">選択してください</option>
40
+ <option value="1" data-val="1" class="py-1 border-top" >ハウスクリーニング</option>
41
+ <option value="2" data-val="1" class="py-1 border-top" >ルームクリーニング</option>
42
+ <option value="3" data-val="1" class="py-1 border-top" >エアコンクリーニング</option>
43
+ <option value="4" data-val="2" class="py-1 border-top" selected>壁紙(クロス)張替え</option>
44
+ <option value="5" data-val="2" class="py-1 border-top" >クッションフロア張替え</option>
45
+ <option value="6" data-val="2" class="py-1 border-top" >フローリング張替え</option>
46
+ <option value="7" data-val="3" class="py-1 border-top" >外壁塗装・コーキング防水工事</option>
47
+ <option value="8" data-val="3" class="py-1 border-top" >屋根塗装・防水工事</option>
48
+ <option value="9" data-val="3" class="py-1 border-top" >屋根・防水修理</option>
49
+ <option value="10" data-val="4" class="py-1 border-top" >エアコン取付け・修理</option>
50
+ <option value="11" data-val="4" class="py-1 border-top" >温水洗浄便座取付け</option>
51
+ <option value="12" data-val="4" class="py-1 border-top" >アンテナ取付け</option>
52
+ <option value="13" data-val="5" class="py-1 border-top" >貯水槽清掃</option>
53
+ <option value="14" data-val="5" class="py-1 border-top" >水道水漏れ修理</option>
54
+ <option value="15" data-val="5" class="py-1 border-top" >排水管洗浄</option>
55
+ </select>
56
+
57
+ <INPUT type="hidden" name="index">
58
+ <INPUT type="hidden" name="step1">
59
+ <button type="submit" class="btn btn-warning text-white pl-5 pr-5">Submit</button>
60
+ </form>
61
+
62
+
63
+
64
+ <script>
65
+ <!--
66
+ var $children = $('.children');
67
+ var original = $children.html();
68
+
69
+ $('.parent').change(function() {
70
+
71
+ var val1 = $(this).val();
72
+
73
+ $children.html(original).find('option').each(function() {
74
+ var val2 = $(this).data('val');
75
+ if (val1 != val2) {
76
+ $(this).not(':first-child').remove();
77
+ }
78
+ });
79
+
80
+ if ($(this).val() == "") {
81
+ $children.attr('disabled', 'disabled');
82
+ } else {
83
+ $children.removeAttr('disabled');
84
+ }
85
+
86
+ });
87
+ -->
88
+ </script>
89
+
90
+
91
+ ```
92
+
93
+ 現状での不都合は、子カテゴリに「disabled」が設定されているため、子カテゴリのデータが選択されているときは「disabled」を外すことは出来るものの、親カテゴリと関連のない子データ、要は全てのデータが表示されてしまう状況です。