質問編集履歴

2

説明文の変更

2018/01/16 02:54

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,218 @@
1
+ データ構造($test_list)
2
+
3
+ ```ここに言語を入力
4
+
5
+ array(2) {
6
+
7
+ [0]=>
8
+
9
+ array(3) {
10
+
11
+ ["test_name"]=>
12
+
13
+ string(15) "テスト太郎"
14
+
15
+ ["test_d_name"]=>
16
+
17
+ string(6) "太郎"
18
+
19
+ ["test_address"]=>
20
+
21
+ string(6) "東京"
22
+
23
+ }
24
+
25
+ [1]=>
26
+
27
+ array(3) {
28
+
29
+ ["test_name"]=>
30
+
31
+ string(15) "テスト花子"
32
+
33
+ ["test_d_name"]=>
34
+
35
+ string(6) "花子"
36
+
37
+ ["test_address"]=>
38
+
39
+ string(6) "大阪"
40
+
41
+ }
42
+
43
+ }
44
+
45
+ ```
46
+
47
+ ■実現したい事
48
+
49
+ (1)「名前を追加」ボタンにて、ラベルを追加して、同じように「選択してください」ラベルから選んだ「$test_list[idx].test_name」から
50
+
51
+ 同じ配列インデックスの「test_d_name」と「test_address」の値をテキストボックスに表示させたいです。
52
+
53
+
54
+
55
+ idの重複はjavascriptではNGなので「test.tpl」の「id="select_test_info"」を「id="select_test_info1"」として、
56
+
57
+ 「名前を追加」ボタンを押して、ラベル追加した際2番目のidが「id="select_test_info2"」3番目のidが「id="select_test_info3"」
58
+
59
+ となっていくのでtplの下記部分をそれに対応したように、「document.getElementById('select_test_info2').addEventListener」
60
+
61
+ 「document.getElementById('select_test_info3').addEventListener」となるようにしたいのですが、どのように
62
+
63
+ したら良いかわからなく悩んでいます。
64
+
65
+
66
+
67
+ (2)ラベルを「選択してください」に戻すと、テキストボックス欄が「undefined」となってしまいます。
68
+
69
+ tplの下記部分に、
70
+
71
+ ```html
72
+
73
+ if ( option.indexOf("選択してください") != -1) {
74
+
75
+ document.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
76
+
77
+ }
78
+
79
+ ```
80
+
81
+ と記載して、「選択してください」ラベルがない場合のみ表示させようとしているのですが、うまく
82
+
83
+ いかなく悩んでいます。
84
+
85
+
86
+
87
+ 以上の2点をどのようにしたら良いかご教授いただきたくお願い致します。
88
+
89
+
90
+
91
+ ●test.tpl
92
+
93
+ ```html
94
+
95
+ <script language="JavaScript" src="test.js?t={$smarty.now}"></script>
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+
104
+
105
+
106
+
107
+ <h3 class="Test_header">テスト</h3>
108
+
109
+ <table data-role="table" id="test_tab" data-mode="reflow" class="ui-responsive table-stroke">
110
+
111
+ <thead>
112
+
113
+ <tr>
114
+
115
+ <th width="5%">メイン</th>
116
+
117
+ <th width="30%">名前</th>
118
+
119
+ <th width="30%">名</th>
120
+
121
+ <th width="30%">住所</th>
122
+
123
+ <th width="5%">削除</th>
124
+
125
+ </tr>
126
+
127
+ </thead>
128
+
129
+ <tbody id="test_tbody">
130
+
131
+ {assign var='i' value=0}
132
+
133
+
134
+
135
+ <tr>
136
+
137
+ <td><input type="radio" id="in_test_radio{$i}" name="test_radio[{$i}]"/></td>
138
+
139
+ <td>
140
+
141
+ <select name="test_info" id="select_test_info1" data-native-menu="true">
142
+
143
+ <option value="">選択してください</option>
144
+
145
+ {section name=idx loop=$test_list}
146
+
147
+ <option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if} data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}">{$test_list[idx].test_name}</option>
148
+
149
+ {/section}
150
+
151
+ </select>
152
+
153
+ </td>
154
+
155
+ <td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名" /></td>
156
+
157
+ <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
158
+
159
+ <td><button type="button" id="btn_del_test{$i}" class="deleteTest ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">削除</button>
160
+
161
+ </tr>
162
+
163
+ </tbody>
164
+
165
+ </table>
166
+
167
+
168
+
169
+ <div class="ui-field-contain">
170
+
171
+ <button type="button" id="btn_addName" class="addName ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">名前を追加</button>
172
+
173
+ </div>
174
+
175
+
176
+
177
+
178
+
179
+
180
+
181
+ </div>
182
+
183
+ <script type="text/javascript">
184
+
185
+ var next_idx = $('#test_tbody').children().length;
186
+
187
+ // console.log(next_idx);
188
+
189
+ document.getElementById('select_test_info').addEventListener('change', function(event) {
190
+
191
+ var option = this.options[this.selectedIndex];
192
+
193
+ // console.log(option);
194
+
195
+ // if ( option.indexOf("選択してください") != -1) {
196
+
197
+ document.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
198
+
199
+ // }
200
+
201
+ document.querySelector('input[name^="test_address"]').value = option.dataset.address;
202
+
203
+ }, false);
204
+
205
+ </script>
206
+
207
+ </body>
208
+
209
+ </html>
210
+
211
+ ```
212
+
1
213
  ●test.js(「名前を追加」ボタンを押した際)
2
214
 
3
- ```javascript
215
+ ```js
4
216
 
5
217
  //名前の行を追加する
6
218
 
@@ -8,10 +220,6 @@
8
220
 
9
221
  {
10
222
 
11
- keepalive();
12
-
13
-
14
-
15
223
  var content = '';
16
224
 
17
225
  var next_idx = $('#test_tbody').children().length;
@@ -22,15 +230,7 @@
22
230
 
23
231
  content += '<td><input type="radio" id="in_test_radio{$i}" name="test_radio['+next_idx+']" value="'+next_idx+'" /></td>';
24
232
 
25
- content += '<td><select name="test_info" id="select_test_info" data-native-menu="true">';
26
-
27
- content += '<option value="">選択してください</option>';
28
-
29
- content += '{section name=idx loop=$test_list}';
30
-
31
- content += '<option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if} data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}">{$test_list[idx].tes_name}</option>';
32
-
33
- content += '{/section}';
233
+ content += '<td><select name="test_info" id="select_test_info'+next_idx+'" data-native-menu="true">';
34
234
 
35
235
  content += '</select></td>';
36
236
 
@@ -46,6 +246,10 @@
46
246
 
47
247
  $('#test_tbody').append(content);
48
248
 
249
+ // selectの中身を足す
250
+
251
+ $('#select_test_info'+next_idx).append($('#select_test_info').children().clone(true));
252
+
49
253
  //Table Tag 再構築
50
254
 
51
255
  $('#test_tbody').trigger('create');
@@ -58,202 +262,6 @@
58
262
 
59
263
  ```
60
264
 
61
-
62
-
63
- ●test.tpl
64
-
65
- ```html
66
-
67
- <script language="JavaScript" src="test.js?t={$smarty.now}"></script>
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
- <h3 class="Test_header">テスト</h3>
80
-
81
- <table data-role="table" id="test_tab" data-mode="reflow" class="ui-responsive table-stroke">
82
-
83
- <thead>
84
-
85
- <tr>
86
-
87
- <th width="5%">メイン</th>
88
-
89
- <th width="30%">名前</th>
90
-
91
- <th width="30%">名</th>
92
-
93
- <th width="30%">住所</th>
94
-
95
- <th width="5%">削除</th>
96
-
97
- </tr>
98
-
99
- </thead>
100
-
101
- <tbody id="test_tbody">
102
-
103
- {assign var='i' value=0}
104
-
105
-
106
-
107
- <tr>
108
-
109
- <td><input type="radio" id="in_test_radio{$i}" name="test_radio[{$i}]"/></td>
110
-
111
- <td>
112
-
113
- <select name="test_info" id="select_test_info" data-native-menu="true">
114
-
115
- <option value="">選択してください</option>
116
-
117
- {section name=idx loop=$test_list}
118
-
119
- <option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if} data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}">{$test_list[idx].test_name}</option>
120
-
121
- {/section}
122
-
123
- </select>
124
-
125
- </td>
126
-
127
- <td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名" /></td>
128
-
129
- <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
130
-
131
- <td><button type="button" id="btn_del_test{$i}" class="deleteTest ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">削除</button>
132
-
133
- </tr>
134
-
135
- </tbody>
136
-
137
- </table>
138
-
139
-
140
-
141
- <div class="ui-field-contain">
142
-
143
- <button type="button" id="btn_addName" class="addName ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">名前を追加</button>
144
-
145
- </div>
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
- </div>
154
-
155
- <script type="text/javascript">
156
-
157
- document.getElementById('select_test_info').addEventListener('change', function(event) {
158
-
159
- var option = this.options[this.selectedIndex];
160
-
161
- console.log(option);
162
-
163
- if ( option.indexOf("選択してください") != -1) {
164
-
165
- document.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
166
-
167
- }
168
-
169
- document.querySelector('input[name^="test_address"]').value = option.dataset.address;
170
-
171
- }, false);
172
-
173
- </script>
174
-
175
- </body>
176
-
177
- </html>
178
-
179
- ```
180
-
181
- 「選択してください」ラベルから選んだ「$test_list[idx].test_name」から同じ配列インデックスの「test_d_name」と「test_address」の値を
182
-
183
- テキストボックスに表示させています。
184
-
185
-
186
-
187
- その際、以下の3点ご質問がございます。
188
-
189
-
190
-
191
- (1)「test_name」をラベル選択した後に「選択してください」ラベルを選択すると、「test_d_name」と「test_address」の値
192
-
193
- が「undefined」となってしまいます。
194
-
195
- 「if ( option.indexOf("選択してください") != -1)」にてラベルに「選択してください」がない場合、「test_d_name」の値をセットする
196
-
197
- ようにしているのですが、セットされません。どのようにしたらいいのでしょうか。
198
-
199
-
200
-
201
- (2)「名前を追加」ボタンにて「test.js」にて、ラベルを追加したいのですが、追加された「選択してください」ラベルを操作すると、
202
-
203
- 「$test_list[idx].test_name」が表示され、リスト選択できない状態です。
204
-
205
-
206
-
207
- (3)ラジオボタンを一つだけ選択できるようにしたいのですが、どのようにしたら実装できますでしょうか。
208
-
209
-
210
-
211
- データ構造($test_list)は
212
-
213
- ```
214
-
215
- array(2) {
216
-
217
- [0]=>
218
-
219
- array(3) {
220
-
221
- ["test_name"]=>
222
-
223
- string(15) "テスト太郎"
224
-
225
- ["test_d_name"]=>
226
-
227
- string(6) "太郎"
228
-
229
- ["test_address"]=>
230
-
231
- string(6) "東京"
232
-
233
- }
234
-
235
- [1]=>
236
-
237
- array(3) {
238
-
239
- ["test_name"]=>
240
-
241
- string(15) "テスト花子"
242
-
243
- ["test_d_name"]=>
244
-
245
- string(6) "花子"
246
-
247
- ["test_address"]=>
248
-
249
- string(6) "大阪"
250
-
251
- }
252
-
253
- }
254
-
255
- ```
256
-
257
265
  となっております。
258
266
 
259
267
  ご教授いただきたくお願い申し上げます。

1

記載の変更

2018/01/16 02:53

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ●test.js(名前を追加ボタンを押した際)
1
+ ●test.js(名前を追加ボタンを押した際)
2
2
 
3
3
  ```javascript
4
4