回答編集履歴

1

jsでmapにアクセスするところのサンプル追加

2020/07/27 08:03

投稿

YakumoSaki
YakumoSaki

スコア2027

test CHANGED
@@ -16,10 +16,6 @@
16
16
 
17
17
 
18
18
 
19
-
20
-
21
-
22
-
23
19
  ```html
24
20
 
25
21
  <!DOCTYPE html>
@@ -28,33 +24,65 @@
28
24
 
29
25
  <head>
30
26
 
31
- <script th:inline="javascript">
32
-
33
- const mapObj = /*[[${slctTypeMap}]]*/ null;
34
-
35
-
36
-
37
- console.log(mapObj);
38
-
39
- </script>
40
-
41
27
  </head>
42
28
 
43
29
  <body>
44
30
 
45
- // MAPを使ってプルダウンを表示しています。これはうまくいきます。
46
-
47
31
  <ul>
48
32
 
33
+ <li>
34
+
49
- <li><select id="slctType" name="slctType">
35
+ <select id="slctType" name="slctType">
50
36
 
51
37
  <option value="">------------</option>
52
38
 
53
39
  <option th:each="mp : ${slctTypeMap}" th:value="${mp.value}" th:inline="text">
54
40
 
41
+ [[${mp.key}]]
42
+
55
- [[${mp.key}]]</option></select></li>
43
+ </option></select>
44
+
45
+ </li>
46
+
47
+
48
+
49
+ <li>
50
+
51
+ <select id="by_js" name="selectType">
52
+
53
+ </select>
54
+
55
+ </li>
56
+
57
+
56
58
 
57
59
  </ul>
60
+
61
+ <script th:inline="javascript">
62
+
63
+ const mapObj = /*[[${slctTypeMap}]]*/ null;
64
+
65
+
66
+
67
+ const selectElement = document.getElementById("by_js");
68
+
69
+
70
+
71
+ for (let key in mapObj) {
72
+
73
+ console.log("selectに追加します -> " + "key:" + key + " value:" + mapObj[key]);
74
+
75
+ let option = document.createElement("option");
76
+
77
+ option.text = key;
78
+
79
+ option.value = mapObj[key];
80
+
81
+ selectElement.appendChild(option);
82
+
83
+ }
84
+
85
+ </script>
58
86
 
59
87
  </body>
60
88