teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問option value selected で選択した値をもとにテキストボックスに反映させるにはどうしたら良いか

編集履歴

質問編集履歴

7

記述の変更

2018/01/12 08:12

投稿

kumakumatan
kumakumatan

スコア213

title CHANGED
File without changes
body CHANGED
@@ -1,16 +1,36 @@
1
+ ●test.js
1
- ```html
2
+ ```
2
- <script type="text/javascript">
3
+ console.log(document.getElementById('select_test_info'));
3
-
4
4
  document.getElementById('select_test_info').addEventListener('change', function(event) {
5
+ //thisもevent.targetもセレクトボックス要素です
6
+ console.log(this, event.target, event);
5
- var option = this.options[this.selectedIndex];
7
+ var option = this.options[this.selectedIndex];
6
- document.querySelector('[name="test_d_name"]').value = option.getAttribute('data-disp');
8
+ document.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
7
- document.querySelector('[name="test_address"]').value = option.getAttribute('data-address');
9
+ document.querySelector('input[name^="test_d_address"]').value = option.dataset.address;
8
10
  }, false);
11
+ ```
9
12
 
10
- </script>
13
+ ●test.tpl
14
+ ```
15
+ <script language="JavaScript" src="test.js?t={$smarty.now}"></script>
16
+
11
17
  ・
12
18
  ・
13
19
  ・
20
+
21
+ <h3 class="Test_header">テスト</h3>
22
+ <table data-role="table" id="test_tab" data-mode="reflow" class="ui-responsive table-stroke">
23
+ <thead>
24
+ <tr>
25
+ <th width="30%">名前</th>
26
+ <th width="30%">名</th>
27
+ <th width="30%">住所</th>
28
+ <th width="10%">削除</th>
29
+ </tr>
30
+ </thead>
31
+ <tbody id="test_tbody">
32
+ {assign var='i' value=0}
33
+
14
34
  <tr>
15
35
  <td>
16
36
  <select name="test_info" id="select_test_info" data-native-menu="true">
@@ -24,12 +44,17 @@
24
44
  <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
25
45
  <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>
26
46
  </tr>
47
+ </tbody>
48
+ </table>
27
49
  ```
50
+ 「test.tpl」から「test.js」を読み込ませて処理をしようとしています。
28
51
  「選択してください」ラベルから選んだ「$test_list[idx].test_name」から同じ配列インデックスの「test_d_name」と「test_address」の値を
29
52
  テキストボックスに表示したく考えております。上記は自分なりに考えてものです。
30
53
  こちらを実施すると、開発者ツール上にて
31
54
  「Uncaught TypeError: Cannot read property 'addEventListener' of null」
32
55
  と表示され、テキストボックスに値が反映されません。
56
+ console.log(document.getElementById('select_test_info'));
57
+ の値はnullとなってしまってます。
33
58
  「選択してください」ラベルには「test_name」の値を選択できる状態になっております。
34
59
 
35
60
  データ構造は
@@ -41,7 +66,7 @@
41
66
  string(15) "テスト太郎"
42
67
  ["test_d_name"]=>
43
68
  string(6) "太郎"
44
- ["test_address"]=>
69
+ ["test_address"]=>
45
70
  string(6) "東京"
46
71
  }
47
72
  [1]=>
@@ -50,7 +75,7 @@
50
75
  string(15) "テスト花子"
51
76
  ["test_d_name"]=>
52
77
  string(6) "花子"
53
- ["test_address"]=>
78
+ ["test_address"]=>
54
79
  string(6) "大阪"
55
80
  }
56
81
  }

6

htmlの修正

2018/01/12 08:12

投稿

kumakumatan
kumakumatan

スコア213

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

5

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

2018/01/12 01:06

投稿

kumakumatan
kumakumatan

スコア213

title CHANGED
File without changes
body CHANGED
@@ -9,33 +9,38 @@
9
9
  </select>
10
10
  </td>
11
11
  <td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名前" /></td>
12
+ <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
12
13
  </tr>
13
14
  ```
14
- 「選択」ラベルから選んだ「$test_list[idx].test_name」から同じレコード上の「$test_list[idx1].test_d_name」に値をセットしたく
15
+ 「選択」ラベルから選んだ「$test_list[idx].test_name」から同じ配列インデックス上の「$test_list[idx1].test_d_name」、「$test_list[idx1].test_address」に値をセットしたく
15
16
  考えております。上記は自分なりに考えてものです。
16
17
  データ構造は
17
18
  ```ここに言語を入力
18
19
  array(2) {
19
20
  [0]=>
20
- array(2) {
21
+ array(3) {
21
22
  ["test_name"]=>
22
23
  string(15) "テスト太郎"
23
24
  ["test_d_name"]=>
24
25
  string(6) "太郎"
26
+ ["test_address"]=>
27
+ string(6) "東京"
25
28
  }
26
29
  [1]=>
27
- array(2) {
30
+ array(3) {
28
31
  ["test_name"]=>
29
32
  string(15) "テスト花子"
30
33
  ["test_d_name"]=>
31
34
  string(6) "花子"
35
+ ["test_address"]=>
36
+ string(6) "大阪"
32
37
  }
33
38
  }
34
39
  ```
35
40
  となっております。
36
- どのようにしたら「$test_list[idx1].test_d_name
41
+ どのようにしたら「$test_list[idx1].test_d_name」、「$test_list[idx1].test_address」
37
42
  に値がセットできるかご教授いただきたく思います。
38
- 「選択」プルダウンを実際に選択したときに、同じ配列インデックスの「test_d_name」の値をテキストボックスに表示したく思います。
43
+ 「選択」プルダウンを実際に選択したときに、同じ配列インデックスの「test_d_name」、「test_address」の値をテキストボックスに表示したく思います。
39
44
  ちなみに、{$test_list[idx].test_name|escape:"html"}は表示されて選択できる状態になって
40
45
  おります。
41
46
  宜しくお願いします。

4

タグに「JavaScript」を追加

2018/01/11 06:06

投稿

kumakumatan
kumakumatan

スコア213

title CHANGED
File without changes
body CHANGED
File without changes

3

説明の追加

2018/01/11 04:29

投稿

kumakumatan
kumakumatan

スコア213

title CHANGED
File without changes
body CHANGED
@@ -35,6 +35,7 @@
35
35
  となっております。
36
36
  どのようにしたら「$test_list[idx1].test_d_name
37
37
  に値がセットできるかご教授いただきたく思います。
38
+ 「選択」プルダウンを実際に選択したときに、同じ配列インデックスの「test_d_name」の値をテキストボックスに表示したく思います。
38
39
  ちなみに、{$test_list[idx].test_name|escape:"html"}は表示されて選択できる状態になって
39
40
  おります。
40
41
  宜しくお願いします。

2

タイプミスの修正

2018/01/11 02:26

投稿

kumakumatan
kumakumatan

スコア213

title CHANGED
File without changes
body CHANGED
@@ -20,14 +20,14 @@
20
20
  array(2) {
21
21
  ["test_name"]=>
22
22
  string(15) "テスト太郎"
23
- ["hp_d_name"]=>
23
+ ["test_d_name"]=>
24
24
  string(6) "太郎"
25
25
  }
26
26
  [1]=>
27
27
  array(2) {
28
28
  ["test_name"]=>
29
29
  string(15) "テスト花子"
30
- ["hp_d_name"]=>
30
+ ["test_d_name"]=>
31
31
  string(6) "花子"
32
32
  }
33
33
  }

1

コメントの補足

2018/01/10 23:32

投稿

kumakumatan
kumakumatan

スコア213

title CHANGED
File without changes
body CHANGED
@@ -35,4 +35,6 @@
35
35
  となっております。
36
36
  どのようにしたら「$test_list[idx1].test_d_name
37
37
  に値がセットできるかご教授いただきたく思います。
38
+ ちなみに、{$test_list[idx].test_name|escape:"html"}は表示されて選択できる状態になって
39
+ おります。
38
40
  宜しくお願いします。