質問編集履歴
4
viewを出力されたhtmlベースの記載に変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -33,29 +33,162 @@
|
|
|
33
33
|
|
|
34
34
|
selectboxのview
|
|
35
35
|
```html
|
|
36
|
-
<select name='data_category_path[]' size={{$size}} class='list {{$filterSelect}}' {{$target}} id={{$hierarchy}} {{$empty}}>
|
|
37
|
-
@foreach($dataitems->data_category_hierarchized[$key1] as $key2 => $val2)
|
|
38
|
-
@if(old('data_category_path') === null || old('data_category_path') === "1000")
|
|
39
|
-
<?php $selected = ""; ?>
|
|
40
|
-
@else
|
|
41
|
-
@if(array_search($dataitems->data_category_hierarchized[$key1][$key2]['data_category_id'],old('data_category_path')) !== false)
|
|
42
|
-
|
|
36
|
+
<div class="row mt-2">
|
|
43
|
-
@else
|
|
44
|
-
<?php $selected = ""; ?>
|
|
45
|
-
@endif
|
|
46
|
-
@endif
|
|
47
|
-
<option class="disable_check hierarchy_{{$key1}}_option {{$key1}}_{{$val2['data-belongsto']}}" value="{{$dataitems->data_category_hierarchized[$key1][$key2]['data_category_id']}}"
|
|
48
|
-
|
|
37
|
+
<div class="col-sm-2 px-sm-2 pr-sm-2 px-3 py-3 text-sm-right text-center">
|
|
49
|
-
|
|
38
|
+
<div class="badge-items badge-deepblue">
|
|
50
|
-
onclick="visible_handling({{$key1}},{{$dataitems->data_category_hierarchized[$key1][$key2]['data_category_id']}})" {{$disabled}} {{$selected}}>
|
|
51
|
-
|
|
39
|
+
カテゴリー<small>(※)</small>
|
|
52
|
-
|
|
40
|
+
</div>
|
|
53
|
-
@endforeach
|
|
54
|
-
|
|
41
|
+
</div>
|
|
42
|
+
<div class="col-sm-10 pr-sm-4 py-3 px-4">
|
|
43
|
+
<div class="contentbox text-sm-left text-center">
|
|
55
44
|
|
|
56
|
-
<
|
|
57
|
-
<
|
|
45
|
+
<div class="wrap--outer mb-4">
|
|
46
|
+
<div class="wrap--inner">
|
|
58
47
|
|
|
48
|
+
<div class='wrap nonedis' id=hierarchy_1_block>
|
|
49
|
+
<span class="help-block_select_category" id="hierarchy_1_notice">
|
|
50
|
+
<strong>選択して下さい</strong><br>
|
|
51
|
+
</span>
|
|
52
|
+
<span class="help-block_select_category" id="hierarchy_1_notice_theme">
|
|
53
|
+
<strong>選択中のカテゴリーで投稿します</strong><br>
|
|
54
|
+
</span>
|
|
55
|
+
<select name='data_category_path[]' size=5 class='list filterSelect' data-target=hierarchy_2 id=hierarchy_1 >
|
|
56
|
+
<option class="disable_check hierarchy_1_option 1_" value="1001"
|
|
57
|
+
data-reference="1001"
|
|
58
|
+
data-belongsto=""
|
|
59
|
+
onclick="visible_handling(1,1001)" >
|
|
60
|
+
業界共通
|
|
61
|
+
</option>
|
|
62
|
+
<option class="disable_check hierarchy_1_option 1_" value="1002"
|
|
63
|
+
data-reference="1002"
|
|
64
|
+
data-belongsto=""
|
|
65
|
+
onclick="visible_handling(1,1002)" >
|
|
66
|
+
業界固有
|
|
67
|
+
</option>
|
|
68
|
+
</select>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
<div class='wrap nonedis' id=hierarchy_2_block>
|
|
76
|
+
<span class="help-block_select_category" id="hierarchy_2_notice">
|
|
77
|
+
<strong>選択して下さい</strong><br>
|
|
78
|
+
</span>
|
|
79
|
+
<span class="help-block_select_category" id="hierarchy_2_notice_theme">
|
|
80
|
+
<strong>選択中のカテゴリーで投稿します</strong><br>
|
|
81
|
+
</span>
|
|
82
|
+
<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_3 id=hierarchy_2 data-allowempty>
|
|
83
|
+
<option class="disable_check hierarchy_2_option 2_1001" value="1003"
|
|
84
|
+
data-reference="1003"
|
|
85
|
+
data-belongsto="1001"
|
|
86
|
+
onclick="visible_handling(2,1003)" >
|
|
87
|
+
カテゴリA
|
|
88
|
+
</option>
|
|
89
|
+
<option class="disable_check hierarchy_2_option 2_1001" value="1004"
|
|
90
|
+
data-reference="1004"
|
|
91
|
+
data-belongsto="1001"
|
|
92
|
+
onclick="visible_handling(2,1004)" >
|
|
93
|
+
カテゴリB
|
|
94
|
+
</option>
|
|
95
|
+
<option class="disable_check hierarchy_2_option 2_1001" value="1005"
|
|
96
|
+
data-reference="1005"
|
|
97
|
+
data-belongsto="1001"
|
|
98
|
+
onclick="visible_handling(2,1005)" >
|
|
99
|
+
カテゴリC
|
|
100
|
+
</option>
|
|
101
|
+
</select>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<div class='wrap nonedis' id=hierarchy_3_block>
|
|
105
|
+
<span class="help-block_select_category" id="hierarchy_3_notice">
|
|
106
|
+
<strong>選択して下さい</strong><br>
|
|
107
|
+
</span>
|
|
108
|
+
<span class="help-block_select_category" id="hierarchy_3_notice_theme">
|
|
109
|
+
<strong>選択中のカテゴリーで投稿します</strong><br>
|
|
110
|
+
</span>
|
|
111
|
+
<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_4 id=hierarchy_3 data-allowempty>
|
|
112
|
+
<option class="disable_check hierarchy_3_option 3_1003" value="1012"
|
|
113
|
+
data-reference="1012"
|
|
114
|
+
data-belongsto="1003"
|
|
115
|
+
onclick="visible_handling(3,1012)" >
|
|
116
|
+
カテゴリD
|
|
117
|
+
</option>
|
|
118
|
+
<option class="disable_check hierarchy_3_option 3_1003" value="1013"
|
|
119
|
+
data-reference="1013"
|
|
120
|
+
data-belongsto="1003"
|
|
121
|
+
onclick="visible_handling(3,1013)" >
|
|
122
|
+
カテゴリE
|
|
123
|
+
</option>
|
|
124
|
+
<option class="disable_check hierarchy_3_option 3_1003" value="1014"
|
|
125
|
+
data-reference="1014"
|
|
126
|
+
data-belongsto="1003"
|
|
127
|
+
onclick="visible_handling(3,1014)" >
|
|
128
|
+
カテゴリF
|
|
129
|
+
</option>
|
|
130
|
+
</select>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class='wrap nonedis' id=hierarchy_4_block>
|
|
134
|
+
<span class="help-block_select_category" id="hierarchy_4_notice">
|
|
135
|
+
<strong>選択して下さい</strong><br>
|
|
136
|
+
</span>
|
|
137
|
+
<span class="help-block_select_category" id="hierarchy_4_notice_theme">
|
|
138
|
+
<strong>選択中のカテゴリーで投稿します</strong><br>
|
|
139
|
+
</span>
|
|
140
|
+
<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_5 id=hierarchy_4 data-allowempty>
|
|
141
|
+
<option class="disable_check hierarchy_4_option 4_1012" value="1048"
|
|
142
|
+
data-reference="1048"
|
|
143
|
+
data-belongsto="1012"
|
|
144
|
+
onclick="visible_handling(4,1048)" >
|
|
145
|
+
カテゴリG
|
|
146
|
+
</option>
|
|
147
|
+
<option class="disable_check hierarchy_4_option 4_1013" value="1049"
|
|
148
|
+
data-reference="1049"
|
|
149
|
+
data-belongsto="1013"
|
|
150
|
+
onclick="visible_handling(4,1049)" >
|
|
151
|
+
カテゴリH
|
|
152
|
+
</option>
|
|
153
|
+
<option class="disable_check hierarchy_4_option 4_1013" value="1050"
|
|
154
|
+
data-reference="1050"
|
|
155
|
+
data-belongsto="1013"
|
|
156
|
+
onclick="visible_handling(4,1050)" >
|
|
157
|
+
カテゴリI
|
|
158
|
+
</option>
|
|
159
|
+
</select>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<div class='wrap nonedis' id=hierarchy_5_block>
|
|
163
|
+
<span class="help-block_select_category" id="hierarchy_5_notice">
|
|
164
|
+
<strong>選択して下さい</strong><br>
|
|
165
|
+
</span>
|
|
166
|
+
<span class="help-block_select_category" id="hierarchy_5_notice_theme">
|
|
167
|
+
<strong>選択中のカテゴリーで投稿します</strong><br>
|
|
168
|
+
</span>
|
|
169
|
+
<select name='data_category_path[]' size=15 class='list ' id=hierarchy_5 data-allowempty>
|
|
170
|
+
<option class="disable_check hierarchy_5_option 5_1032" value="1334"
|
|
171
|
+
data-reference="1334"
|
|
172
|
+
data-belongsto="1032"
|
|
173
|
+
onclick="visible_handling(5,1334)" >
|
|
174
|
+
カテゴリJ
|
|
175
|
+
</option>
|
|
176
|
+
<option class="disable_check hierarchy_5_option 5_1026" value="1081"
|
|
177
|
+
data-reference="1081"
|
|
178
|
+
data-belongsto="1026"
|
|
179
|
+
onclick="visible_handling(5,1081)" >
|
|
180
|
+
カテゴリK
|
|
181
|
+
</option>
|
|
182
|
+
<option class="disable_check hierarchy_5_option 5_1026" value="1082"
|
|
183
|
+
data-reference="1082"
|
|
184
|
+
data-belongsto="1026"
|
|
185
|
+
onclick="visible_handling(5,1082)" >
|
|
186
|
+
カテゴリL
|
|
187
|
+
</option>
|
|
188
|
+
</select>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
59
192
|
```
|
|
60
193
|
|
|
61
194
|
|
3
前提の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
3
3
|
環境はWindows10
|
|
4
4
|
ブラウザはIE11 バージョン: 11.295になります。
|
|
5
5
|
|
|
6
|
+
### 前提
|
|
7
|
+
本件で扱う仕組みは、データをサイトに投稿する際に、
|
|
8
|
+
4階層に階層化されたカテゴリーをselectboxを
|
|
9
|
+
使用して1階層ずつ選択する仕組みです。
|
|
10
|
+
（ログインが必要な画面なのでリンクは貼ることができませんが、
|
|
11
|
+
ヤフオクの出品カテゴリ選択と同じです）
|
|
12
|
+
第一階層のカテゴリをselectボックスのoptionから
|
|
13
|
+
選ぶと第二階層のselectボックスが右に出現し、
|
|
14
|
+
かつその中身は第一階層で選んだカテゴリーの配下になっています。
|
|
15
|
+
なので、selectボックスのoptionタグに、onclickを使用して、
|
|
16
|
+
次の階層のselectボックスの出現・非出現をコントロールしています。
|
|
17
|
+
（第一階層で選んだものによっては、次の階層を出現させず、そのカテゴリー
|
|
18
|
+
で投稿させるものがあるため、中身の値で出現・非出現の判断が必要です）
|
|
19
|
+
|
|
6
20
|
### やりたいこと
|
|
7
21
|
selectボックスの中のoption(データベースから出力した値をforeachで取得している)
|
|
8
22
|
をクリックした際に、onclickを起動させたいです。
|
|
@@ -18,7 +32,6 @@
|
|
|
18
32
|
→https://faq.support.biglobe.ne.jp/faq_detail.html?id=11426
|
|
19
33
|
|
|
20
34
|
selectboxのview
|
|
21
|
-
（データをサイトに投稿する際に、カテゴリーを選択するviewになります）
|
|
22
35
|
```html
|
|
23
36
|
<select name='data_category_path[]' size={{$size}} class='list {{$filterSelect}}' {{$target}} id={{$hierarchy}} {{$empty}}>
|
|
24
37
|
@foreach($dataitems->data_category_hierarchized[$key1] as $key2 => $val2)
|
2
ソースのベース変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
selectboxのview
|
|
21
21
|
（データをサイトに投稿する際に、カテゴリーを選択するviewになります）
|
|
22
|
-
```
|
|
22
|
+
```html
|
|
23
23
|
<select name='data_category_path[]' size={{$size}} class='list {{$filterSelect}}' {{$target}} id={{$hierarchy}} {{$empty}}>
|
|
24
24
|
@foreach($dataitems->data_category_hierarchized[$key1] as $key2 => $val2)
|
|
25
25
|
@if(old('data_category_path') === null || old('data_category_path') === "1000")
|
1
該当部分のみの記述に変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,44 +20,6 @@
|
|
|
20
20
|
selectboxのview
|
|
21
21
|
（データをサイトに投稿する際に、カテゴリーを選択するviewになります）
|
|
22
22
|
```php
|
|
23
|
-
<script type="text/javascript">
|
|
24
|
-
var theme = @json($dataitems->data_theme_id);
|
|
25
|
-
var category_old = @json(old('data_category_path'));
|
|
26
|
-
var undecided_old = @json(old('undecided'));
|
|
27
|
-
</script>
|
|
28
|
-
|
|
29
|
-
<div class="wrap--outer mb-4">
|
|
30
|
-
<div class="wrap--inner">
|
|
31
|
-
@foreach($dataitems->data_category_hierarchized as $key1 => $val1)
|
|
32
|
-
<?php $hierarchy = "hierarchy_".$key1;?>
|
|
33
|
-
@if($key1 === 1)
|
|
34
|
-
<?php
|
|
35
|
-
$empty = "";
|
|
36
|
-
$size = "5"; ?>
|
|
37
|
-
@else
|
|
38
|
-
<?php
|
|
39
|
-
$empty = "data-allowempty";
|
|
40
|
-
$size = "15"; ?>
|
|
41
|
-
@endif
|
|
42
|
-
@if($val1 !== end($dataitems->data_category_hierarchized))
|
|
43
|
-
<?php $filterSelect = "filterSelect";
|
|
44
|
-
$target = 'data-target=hierarchy_'.($key1+1); ?>
|
|
45
|
-
@else
|
|
46
|
-
<?php $filterSelect = "";
|
|
47
|
-
$target = ""; ?>
|
|
48
|
-
@endif
|
|
49
|
-
@if(old('undecided') === "on")
|
|
50
|
-
<?php $disabled = "disabled";?>
|
|
51
|
-
@else
|
|
52
|
-
<?php $disabled = "";?>
|
|
53
|
-
@endif
|
|
54
|
-
<div class='wrap nonedis' id={{$hierarchy}}_block>
|
|
55
|
-
<span class="help-block_select_category" id="{{$hierarchy}}_notice">
|
|
56
|
-
<strong>選択して下さい</strong><br>
|
|
57
|
-
</span>
|
|
58
|
-
<span class="help-block_select_category" id="{{$hierarchy}}_notice_theme">
|
|
59
|
-
<strong>選択中のカテゴリーで投稿します</strong><br>
|
|
60
|
-
</span>
|
|
61
23
|
<select name='data_category_path[]' size={{$size}} class='list {{$filterSelect}}' {{$target}} id={{$hierarchy}} {{$empty}}>
|
|
62
24
|
@foreach($dataitems->data_category_hierarchized[$key1] as $key2 => $val2)
|
|
63
25
|
@if(old('data_category_path') === null || old('data_category_path') === "1000")
|
|
@@ -77,14 +39,7 @@
|
|
|
77
39
|
</option>
|
|
78
40
|
@endforeach
|
|
79
41
|
</select>
|
|
80
|
-
</div>
|
|
81
42
|
|
|
82
|
-
@endforeach
|
|
83
|
-
<?php $count_hierarchy = $key1; ?>
|
|
84
|
-
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
|
|
88
43
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
89
44
|
<script src="{{ asset('/js/datacategory_visible_handling.js') }}"></script>
|
|
90
45
|
|
|
@@ -94,96 +49,6 @@
|
|
|
94
49
|
起動させたいjs
|
|
95
50
|
datacategory_visible_handling.js
|
|
96
51
|
```javascript
|
|
97
|
-
// make it none-visible except first hierarchy
|
|
98
|
-
document.getElementById('hierarchy_1_block').style.display ="block";
|
|
99
|
-
document.getElementById('hierarchy_1_notice').style.visibility ="visible";
|
|
100
|
-
document.getElementById('hierarchy_1_notice_theme').style.display ="none";
|
|
101
|
-
|
|
102
|
-
if(category_old){
|
|
103
|
-
last_category = category_old.slice(-1)[0];
|
|
104
|
-
last_category = Number(last_category);
|
|
105
|
-
var theme_check_old = theme.indexOf(last_category);
|
|
106
|
-
|
|
107
|
-
//hierarchy visible control for old
|
|
108
|
-
if(category_old instanceof Array == true){
|
|
109
|
-
var old_count_hierarchy = category_old.length;}
|
|
110
|
-
else{old_count_hierarchy = 0;}
|
|
111
|
-
|
|
112
|
-
// selected theme
|
|
113
|
-
if (theme_check_old >= 0){
|
|
114
|
-
|
|
115
|
-
for( var i=1; i<=(old_count_hierarchy); i++){
|
|
116
|
-
|
|
117
|
-
// block
|
|
118
|
-
document.getElementById('hierarchy_'+i+'_block').style.display ="block";
|
|
119
|
-
|
|
120
|
-
// notice
|
|
121
|
-
if(i<old_count_hierarchy){
|
|
122
|
-
document.getElementById('hierarchy_'+i+'_notice').style.visibility ="hidden";
|
|
123
|
-
document.getElementById('hierarchy_'+i+'_notice').style.display ="block";
|
|
124
|
-
document.getElementById('hierarchy_'+i+'_notice_theme').style.visibility ="hidden";
|
|
125
|
-
document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="none";
|
|
126
|
-
}
|
|
127
|
-
if(i==(old_count_hierarchy)){
|
|
128
|
-
document.getElementById('hierarchy_'+i+'_notice').style.visibility ="hidden";
|
|
129
|
-
document.getElementById('hierarchy_'+i+'_notice').style.display ="none";
|
|
130
|
-
document.getElementById('hierarchy_'+i+'_notice_theme').style.visibility ="visible";
|
|
131
|
-
document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="block";
|
|
132
|
-
}
|
|
133
|
-
;}
|
|
134
|
-
|
|
135
|
-
// option
|
|
136
|
-
for( var i=2; i<=old_count_hierarchy; i++){
|
|
137
|
-
var firstElement = document.getElementsByClassName('hierarchy_'+i+'_option');
|
|
138
|
-
for (var k = 0; k < firstElement.length; k++) {
|
|
139
|
-
firstElement[k].style.display ="none";
|
|
140
|
-
};
|
|
141
|
-
;}
|
|
142
|
-
for( var i=1; i<=old_count_hierarchy; i++){
|
|
143
|
-
var secondElement = document.getElementsByClassName((i+1)+"_"+category_old[i-1]);
|
|
144
|
-
for (var k = 0; k < secondElement.length; k++) {
|
|
145
|
-
secondElement[k].style.display ="block";
|
|
146
|
-
}
|
|
147
|
-
;}
|
|
148
|
-
;}
|
|
149
|
-
|
|
150
|
-
// not selected theme
|
|
151
|
-
else{
|
|
152
|
-
for( var i=1; i<=(old_count_hierarchy+1); i++){
|
|
153
|
-
// block
|
|
154
|
-
document.getElementById('hierarchy_'+i+'_block').style.display ="block";
|
|
155
|
-
|
|
156
|
-
// notice
|
|
157
|
-
if(i<=old_count_hierarchy){
|
|
158
|
-
document.getElementById('hierarchy_'+i+'_notice').style.visibility ="hidden";
|
|
159
|
-
document.getElementById('hierarchy_'+i+'_notice').style.display ="block";
|
|
160
|
-
document.getElementById('hierarchy_'+i+'_notice_theme').style.visibility ="hidden";
|
|
161
|
-
document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="none";
|
|
162
|
-
}
|
|
163
|
-
if(i==(old_count_hierarchy+1)){
|
|
164
|
-
document.getElementById('hierarchy_'+i+'_notice').style.visibility ="visible";
|
|
165
|
-
document.getElementById('hierarchy_'+i+'_notice').style.display ="block";
|
|
166
|
-
document.getElementById('hierarchy_'+i+'_notice_theme').style.visibility ="hidden";
|
|
167
|
-
document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="none";
|
|
168
|
-
}
|
|
169
|
-
;}
|
|
170
|
-
|
|
171
|
-
//option
|
|
172
|
-
for( var i=2; i<=(old_count_hierarchy+1); i++){
|
|
173
|
-
var firstElement = document.getElementsByClassName('hierarchy_'+i+'_option');
|
|
174
|
-
for (var k = 0; k < firstElement.length; k++) {
|
|
175
|
-
firstElement[k].style.display ="none";
|
|
176
|
-
};
|
|
177
|
-
}
|
|
178
|
-
for( var i=1; i<=old_count_hierarchy+1; i++){
|
|
179
|
-
var secondElement = document.getElementsByClassName((i+1)+"_"+category_old[i-1]);
|
|
180
|
-
for (var k = 0; k < secondElement.length; k++) {
|
|
181
|
-
secondElement[k].style.display ="block";
|
|
182
|
-
}
|
|
183
|
-
;}
|
|
184
|
-
;}
|
|
185
|
-
;}
|
|
186
|
-
|
|
187
52
|
function visible_handling(hierarchy_num,category_id){
|
|
188
53
|
|
|
189
54
|
document.getElementById('hierarchy_1_notice').style.visibility ="hidden";
|