質問編集履歴

7

記述の変更

2018/01/12 08:12

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -1,28 +1,68 @@
1
- ```html
1
+ test.js
2
2
 
3
+ ```
4
+
3
- <script type="text/javascript">
5
+ console.log(document.getElementById('select_test_info'));
6
+
7
+ document.getElementById('select_test_info').addEventListener('change', function(event) {
8
+
9
+ //thisもevent.targetもセレクトボックス要素です
10
+
11
+ console.log(this, event.target, event);
12
+
13
+ var option = this.options[this.selectedIndex];
14
+
15
+ document.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
16
+
17
+ document.querySelector('input[name^="test_d_address"]').value = option.dataset.address;
18
+
19
+ }, false);
20
+
21
+ ```
4
22
 
5
23
 
6
24
 
7
- document.getElementById('select_test_info').addEventListener('change', function(event) {
25
+ test.tpl
8
26
 
9
- var option = this.options[this.selectedIndex];
27
+ ```
10
28
 
11
- document.querySelector('[name="test_d_name"]').value = option.getAttribute('data-disp');
12
-
13
- document.querySelector('[name="test_address"]').value = option.getAttribute('data-address');
29
+ <script language="JavaScript" src="test.js?t={$smarty.now}"></script>
14
-
15
- }, false);
16
30
 
17
31
 
18
-
19
- </script>
20
32
 
21
33
 
22
34
 
23
35
 
24
36
 
25
37
 
38
+
39
+
40
+
41
+ <h3 class="Test_header">テスト</h3>
42
+
43
+ <table data-role="table" id="test_tab" data-mode="reflow" class="ui-responsive table-stroke">
44
+
45
+ <thead>
46
+
47
+ <tr>
48
+
49
+ <th width="30%">名前</th>
50
+
51
+ <th width="30%">名</th>
52
+
53
+ <th width="30%">住所</th>
54
+
55
+ <th width="10%">削除</th>
56
+
57
+ </tr>
58
+
59
+ </thead>
60
+
61
+ <tbody id="test_tbody">
62
+
63
+ {assign var='i' value=0}
64
+
65
+
26
66
 
27
67
  <tr>
28
68
 
@@ -50,7 +90,13 @@
50
90
 
51
91
  </tr>
52
92
 
93
+ </tbody>
94
+
95
+ </table>
96
+
53
97
  ```
98
+
99
+ 「test.tpl」から「test.js」を読み込ませて処理をしようとしています。
54
100
 
55
101
  「選択してください」ラベルから選んだ「$test_list[idx].test_name」から同じ配列インデックスの「test_d_name」と「test_address」の値を
56
102
 
@@ -61,6 +107,10 @@
61
107
  「Uncaught TypeError: Cannot read property 'addEventListener' of null」
62
108
 
63
109
  と表示され、テキストボックスに値が反映されません。
110
+
111
+ console.log(document.getElementById('select_test_info'));
112
+
113
+ の値はnullとなってしまってます。
64
114
 
65
115
  「選択してください」ラベルには「test_name」の値を選択できる状態になっております。
66
116
 
@@ -84,7 +134,7 @@
84
134
 
85
135
  string(6) "太郎"
86
136
 
87
- ["test_address"]=>
137
+ ["test_address"]=>
88
138
 
89
139
  string(6) "東京"
90
140
 
@@ -102,7 +152,7 @@
102
152
 
103
153
  string(6) "花子"
104
154
 
105
- ["test_address"]=>
155
+ ["test_address"]=>
106
156
 
107
157
  string(6) "大阪"
108
158
 

6

htmlの修正

2018/01/12 08:12

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,28 @@
1
1
  ```html
2
+
3
+ <script type="text/javascript">
4
+
5
+
6
+
7
+ document.getElementById('select_test_info').addEventListener('change', function(event) {
8
+
9
+ var option = this.options[this.selectedIndex];
10
+
11
+ document.querySelector('[name="test_d_name"]').value = option.getAttribute('data-disp');
12
+
13
+ document.querySelector('[name="test_address"]').value = option.getAttribute('data-address');
14
+
15
+ }, false);
16
+
17
+
18
+
19
+ </script>
20
+
21
+
22
+
23
+
24
+
25
+
2
26
 
3
27
  <tr>
4
28
 
@@ -6,11 +30,11 @@
6
30
 
7
31
  <select name="test_info" id="select_test_info" data-native-menu="true">
8
32
 
9
- <option value="">選択</option>
33
+ <option value="">選択してください</option>
10
34
 
11
35
  {section name=idx loop=$test_list}
12
36
 
13
- <option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if}>{$test_list[idx].test_name}</option>
37
+ <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>
14
38
 
15
39
  {/section}
16
40
 
@@ -18,17 +42,29 @@
18
42
 
19
43
  </td>
20
44
 
21
- <td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名" /></td>
45
+ <td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名" /></td>
22
46
 
23
- <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
47
+ <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
48
+
49
+ <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>
24
50
 
25
51
  </tr>
26
52
 
27
53
  ```
28
54
 
29
- 「選択」ラベルから選んだ「$test_list[idx].test_name」から同じ配列インデックスの「$test_list[idx1].test_d_name」$test_list[idx1].test_address」値をセットしたく
55
+ 「選択してください」ラベルから選んだ「$test_list[idx].test_name」から同じ配列インデックスの「test_d_name」「test_address」値を
30
56
 
31
- 考えております。上記は自分なりに考えてものです。
57
+ テキストボックスに表示したく考えております。上記は自分なりに考えてものです。
58
+
59
+ こちらを実施すると、開発者ツール上にて
60
+
61
+ 「Uncaught TypeError: Cannot read property 'addEventListener' of null」
62
+
63
+ と表示され、テキストボックスに値が反映されません。
64
+
65
+ 「選択してください」ラベルには「test_name」の値を選択できる状態になっております。
66
+
67
+
32
68
 
33
69
  データ構造は
34
70
 
@@ -78,14 +114,6 @@
78
114
 
79
115
  となっております。
80
116
 
81
- どのようにしたら「$test_list[idx1].test_d_name」、「$test_list[idx1].test_address」
82
-
83
- に値がセットできるかご教授いただきたく思います。
117
+ どのようしたら値がセットできるかご教授いただきたく思います。
84
-
85
- 「選択」プルダウンを実際に選択したときに、同じ配列インデックスの「test_d_name」、「test_address」の値をテキストボックスに表示したく思います。
86
-
87
- ちなみに、{$test_list[idx].test_name|escape:"html"}は表示されて選択できる状態になって
88
-
89
- おります。
90
118
 
91
119
  宜しくお願いします。

5

「$test_list[idx1].test_address」の追記

2018/01/12 01:06

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -20,11 +20,13 @@
20
20
 
21
21
  <td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名前" /></td>
22
22
 
23
+ <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
24
+
23
25
  </tr>
24
26
 
25
27
  ```
26
28
 
27
- 「選択」ラベルから選んだ「$test_list[idx].test_name」から同じレコード上の「$test_list[idx1].test_d_name」に値をセットしたく
29
+ 「選択」ラベルから選んだ「$test_list[idx].test_name」から同じ配列インデックス上の「$test_list[idx1].test_d_name」、「$test_list[idx1].test_address」に値をセットしたく
28
30
 
29
31
  考えております。上記は自分なりに考えてものです。
30
32
 
@@ -36,7 +38,7 @@
36
38
 
37
39
  [0]=>
38
40
 
39
- array(2) {
41
+ array(3) {
40
42
 
41
43
  ["test_name"]=>
42
44
 
@@ -46,11 +48,15 @@
46
48
 
47
49
  string(6) "太郎"
48
50
 
51
+ ["test_address"]=>
52
+
53
+ string(6) "東京"
54
+
49
55
  }
50
56
 
51
57
  [1]=>
52
58
 
53
- array(2) {
59
+ array(3) {
54
60
 
55
61
  ["test_name"]=>
56
62
 
@@ -60,6 +66,10 @@
60
66
 
61
67
  string(6) "花子"
62
68
 
69
+ ["test_address"]=>
70
+
71
+ string(6) "大阪"
72
+
63
73
  }
64
74
 
65
75
  }
@@ -68,11 +78,11 @@
68
78
 
69
79
  となっております。
70
80
 
71
- どのようにしたら「$test_list[idx1].test_d_name
81
+ どのようにしたら「$test_list[idx1].test_d_name」、「$test_list[idx1].test_address」
72
82
 
73
83
  に値がセットできるかご教授いただきたく思います。
74
84
 
75
- 「選択」プルダウンを実際に選択したときに、同じ配列インデックスの「test_d_name」の値をテキストボックスに表示したく思います。
85
+ 「選択」プルダウンを実際に選択したときに、同じ配列インデックスの「test_d_name」、「test_address」の値をテキストボックスに表示したく思います。
76
86
 
77
87
  ちなみに、{$test_list[idx].test_name|escape:"html"}は表示されて選択できる状態になって
78
88
 

4

タグに「JavaScript」を追加

2018/01/11 06:06

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
File without changes

3

説明の追加

2018/01/11 04:29

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -72,6 +72,8 @@
72
72
 
73
73
  に値がセットできるかご教授いただきたく思います。
74
74
 
75
+ 「選択」プルダウンを実際に選択したときに、同じ配列インデックスの「test_d_name」の値をテキストボックスに表示したく思います。
76
+
75
77
  ちなみに、{$test_list[idx].test_name|escape:"html"}は表示されて選択できる状態になって
76
78
 
77
79
  おります。

2

タイプミスの修正

2018/01/11 02:26

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
  string(15) "テスト太郎"
44
44
 
45
- ["hp_d_name"]=>
45
+ ["test_d_name"]=>
46
46
 
47
47
  string(6) "太郎"
48
48
 
@@ -56,7 +56,7 @@
56
56
 
57
57
  string(15) "テスト花子"
58
58
 
59
- ["hp_d_name"]=>
59
+ ["test_d_name"]=>
60
60
 
61
61
  string(6) "花子"
62
62
 

1

コメントの補足

2018/01/10 23:32

投稿

kumakumatan
kumakumatan

スコア213

test CHANGED
File without changes
test CHANGED
@@ -72,4 +72,8 @@
72
72
 
73
73
  に値がセットできるかご教授いただきたく思います。
74
74
 
75
+ ちなみに、{$test_list[idx].test_name|escape:"html"}は表示されて選択できる状態になって
76
+
77
+ おります。
78
+
75
79
  宜しくお願いします。