teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

2020/09/29 08:06

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -144,133 +144,5 @@
144
144
  });
145
145
  </script>
146
146
  </body>
147
- </html><DOCTYPE html>
148
- <html>
149
- <head>
150
- <meta charset="UTF-8">
151
- <meta name="robots" content="noindex,nofollow">
152
- <meta http-equiv="content-language" content="ja">
153
- <meta http-equiv="Pragma" content="no-store">
154
- <meta http-equiv="Cache-Control" content="no-store">
155
- <meta http-equiv="Expires" content="0">
156
-
157
-
158
- <!-- ビューポートの設定 -->
159
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
160
-
161
-
162
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
163
-
164
- <title>デモ</title>
165
-
166
- <style>
167
- html{
168
- font-size:20px;
169
- }
170
- body{
171
- margin:30px;
172
- }
173
- main{
174
- background-color:#f8f8f8;
175
- padding:20px;
176
- }
177
- h2{
178
- font-size:22px;
179
- }
180
-
181
-
182
- select,input,textarea{
183
- font-family : inherit;
184
- font-size:20px;
185
-
186
-
187
- padding:3px;
188
- border:1px solid black;
189
- vertical-align:middle;
190
- }
191
-
192
- </style>
193
- </head>
194
- <body>
195
-
196
-
197
-
198
- <main>
199
- <h1 style="color:black;">DEMO</h1>
200
-
201
-
202
- <!-- 2つめの計算の箇所-->
203
- <h2>データ名2</h2>
204
- <select id="subtotal2" style="font-size:18px;width:200px;"></select>
205
- <p id="subresult2">1</p>
206
-
207
- <!-- 2つめの計算の箇所ここまで-->
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
- <HR style="margin: 2em 0 ;">
216
-
217
-
218
- </main>
219
-
220
-
221
-
222
-
223
-
224
-
225
- <script>
226
-
227
- jQuery(function($){
228
-
229
- var data2Json= [
230
- {
231
- "list": "データを選択してください",
232
- "value": "1",
233
- "type":"条AA"
234
- },
235
- {
236
- "list": "aA",
237
- "value": "1.2",
238
- "type":"条AA"
239
- },
240
- {
241
- "list": "いB",
242
- "value": "1.5",
243
- "type":"条BB"
244
- },
245
- {
246
- "list": "うC",
247
- "value": "1.8",
248
- "type":"条CC"
249
- }
250
- ];
251
-
252
-
253
-
254
-
255
-
256
-
257
-
258
-
259
-
260
- $("#subtotal2").append(data2Json.map(
261
- x => $(`<option value="${x.value}">${x.list}</option>`)));
262
-
263
- $('#subtotal2').change(function() {
264
- $('#subresult2').text($(this).val());
265
- window.Calc2 = $(this).val();
266
- //gassanFnc();
267
- });
268
-
269
-
270
-
271
-
272
- });
273
- </script>
274
- </body>
275
147
  </html>
276
148
  ```

5

編集

2020/09/29 08:06

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -8,9 +8,10 @@
8
8
 
9
9
 
10
10
  [追記]
11
- json埋め込み書き換えで表示はされるようになったのですが、
11
+ json埋め込み書き換えで表示はされるようになったのですが、
12
12
  実際のデータよりも、プルダウンメニューで多く表示されてしまいます。
13
13
 
14
+
14
15
 
15
16
  ```html
16
17
  <DOCTYPE html>
@@ -57,9 +58,7 @@
57
58
  border:1px solid black;
58
59
  vertical-align:middle;
59
60
  }
60
- #subresult1:after{
61
+
61
- content:"円";
62
- }
63
62
  </style>
64
63
  </head>
65
64
  <body>
@@ -122,19 +121,152 @@
122
121
 
123
122
 
124
123
 
125
- Object.keys(data2Json).forEach(function(key) {
124
+
126
125
 
127
- $("#subtotal2").append(data2Json.map(
126
+
128
- x => $(`<option value="${x.value}">${x.list}</option>`)));
129
127
 
128
+
129
+
130
+ $("#subtotal2").append(data2Json.map(
131
+ x => $(`<option value="${x.value}">${x.list}</option>`)));
132
+
133
+ $('#subtotal2').change(function() {
134
+ $('#subresult2').text($(this).val());
135
+ window.Calc2 = $(this).val();
136
+ //gassanFnc();
137
+ });
138
+
130
139
 
131
140
 
132
- });
133
141
 
142
+
143
+
144
+ });
145
+ </script>
146
+ </body>
147
+ </html><DOCTYPE html>
148
+ <html>
149
+ <head>
150
+ <meta charset="UTF-8">
151
+ <meta name="robots" content="noindex,nofollow">
152
+ <meta http-equiv="content-language" content="ja">
153
+ <meta http-equiv="Pragma" content="no-store">
154
+ <meta http-equiv="Cache-Control" content="no-store">
155
+ <meta http-equiv="Expires" content="0">
156
+
157
+
158
+ <!-- ビューポートの設定 -->
159
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
160
+
161
+
162
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
163
+
164
+ <title>デモ</title>
165
+
166
+ <style>
167
+ html{
168
+ font-size:20px;
169
+ }
170
+ body{
171
+ margin:30px;
172
+ }
173
+ main{
174
+ background-color:#f8f8f8;
175
+ padding:20px;
176
+ }
177
+ h2{
178
+ font-size:22px;
179
+ }
180
+
181
+
182
+ select,input,textarea{
183
+ font-family : inherit;
184
+ font-size:20px;
185
+
186
+
187
+ padding:3px;
188
+ border:1px solid black;
189
+ vertical-align:middle;
190
+ }
134
191
 
192
+ </style>
193
+ </head>
194
+ <body>
135
195
 
136
196
 
137
197
 
198
+ <main>
199
+ <h1 style="color:black;">DEMO</h1>
200
+
201
+
202
+ <!-- 2つめの計算の箇所-->
203
+ <h2>データ名2</h2>
204
+ <select id="subtotal2" style="font-size:18px;width:200px;"></select>
205
+ <p id="subresult2">1</p>
206
+
207
+ <!-- 2つめの計算の箇所ここまで-->
208
+
209
+
210
+
211
+
212
+
213
+
214
+
215
+ <HR style="margin: 2em 0 ;">
216
+
217
+
218
+ </main>
219
+
220
+
221
+
222
+
223
+
224
+
225
+ <script>
226
+
227
+ jQuery(function($){
228
+
229
+ var data2Json= [
230
+ {
231
+ "list": "データを選択してください",
232
+ "value": "1",
233
+ "type":"条AA"
234
+ },
235
+ {
236
+ "list": "aA",
237
+ "value": "1.2",
238
+ "type":"条AA"
239
+ },
240
+ {
241
+ "list": "いB",
242
+ "value": "1.5",
243
+ "type":"条BB"
244
+ },
245
+ {
246
+ "list": "うC",
247
+ "value": "1.8",
248
+ "type":"条CC"
249
+ }
250
+ ];
251
+
252
+
253
+
254
+
255
+
256
+
257
+
258
+
259
+
260
+ $("#subtotal2").append(data2Json.map(
261
+ x => $(`<option value="${x.value}">${x.list}</option>`)));
262
+
263
+ $('#subtotal2').change(function() {
264
+ $('#subresult2').text($(this).val());
265
+ window.Calc2 = $(this).val();
266
+ //gassanFnc();
267
+ });
268
+
269
+
138
270
 
139
271
 
140
272
  });

4

データの書き換え

2020/09/26 02:52

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -131,13 +131,7 @@
131
131
 
132
132
  });
133
133
 
134
- Object.keys(data2Json).forEach(function(key) {
135
-
136
- var d=$('<datalist id="list">').append(data2Json.map(x=>$(`<option value="${x.list}"</option>`)));
137
- $("input#subtotal2").append(d);
138
-
139
134
 
140
- });
141
135
 
142
136
 
143
137
 

3

データの書き換え

2020/09/26 02:35

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -11,6 +11,7 @@
11
11
  json埋め込み書き換えで表示はされるようになったのですが、
12
12
  実際のデータよりも、プルダウンメニューで多く表示されてしまいます。
13
13
 
14
+
14
15
  ```html
15
16
  <DOCTYPE html>
16
17
  <html>

2

追記

2020/09/26 02:33

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -6,144 +6,144 @@
6
6
  ※外部jsonデータを変数に入れたり、
7
7
  書き換えできるところはしています。
8
8
 
9
+
10
+ [追記]
11
+ json埋め込み書き換えで表示はされるようになったのですが、
12
+ 実際のデータよりも、プルダウンメニューで多く表示されてしまいます。
13
+
9
14
  ```html
10
15
  <DOCTYPE html>
11
- <html>
16
+ <html>
12
- <head>
17
+ <head>
13
- <meta charset="UTF-8">
18
+ <meta charset="UTF-8">
14
- <meta name="robots" content="noindex,nofollow">
19
+ <meta name="robots" content="noindex,nofollow">
15
- <meta http-equiv="content-language" content="ja">
20
+ <meta http-equiv="content-language" content="ja">
16
- <meta http-equiv="Pragma" content="no-store">
21
+ <meta http-equiv="Pragma" content="no-store">
17
- <meta http-equiv="Cache-Control" content="no-store">
22
+ <meta http-equiv="Cache-Control" content="no-store">
18
- <meta http-equiv="Expires" content="0">
23
+ <meta http-equiv="Expires" content="0">
24
+
25
+
26
+ <!-- ビューポートの設定 -->
27
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
28
+
29
+
30
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
31
+
32
+ <title>デモ</title>
33
+
34
+ <style>
35
+ html{
36
+ font-size:20px;
37
+ }
38
+ body{
39
+ margin:30px;
40
+ }
41
+ main{
42
+ background-color:#f8f8f8;
43
+ padding:20px;
44
+ }
45
+ h2{
46
+ font-size:22px;
47
+ }
48
+
49
+
50
+ select,input,textarea{
51
+ font-family : inherit;
52
+ font-size:20px;
53
+
54
+
55
+ padding:3px;
56
+ border:1px solid black;
57
+ vertical-align:middle;
58
+ }
59
+ #subresult1:after{
60
+ content:"円";
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+
66
+
67
+
68
+ <main>
69
+ <h1 style="color:black;">DEMO</h1>
70
+
71
+
72
+ <!-- 2つめの計算の箇所-->
73
+ <h2>データ名2</h2>
74
+ <select id="subtotal2" style="font-size:18px;width:200px;"></select>
75
+ <p id="subresult2">1</p>
76
+
77
+ <!-- 2つめの計算の箇所ここまで-->
78
+
79
+
80
+
81
+
82
+
83
+
84
+
85
+ <HR style="margin: 2em 0 ;">
86
+
87
+
88
+ </main>
89
+
90
+
91
+
92
+
93
+
94
+
95
+ <script>
96
+
97
+ jQuery(function($){
98
+
99
+ var data2Json= [
100
+ {
101
+ "list": "データを選択してください",
102
+ "value": "1",
103
+ "type":"条AA"
104
+ },
105
+ {
106
+ "list": "aA",
107
+ "value": "1.2",
108
+ "type":"条AA"
109
+ },
110
+ {
111
+ "list": "いB",
112
+ "value": "1.5",
113
+ "type":"条BB"
114
+ },
115
+ {
116
+ "list": "うC",
117
+ "value": "1.8",
118
+ "type":"条CC"
119
+ }
120
+ ];
121
+
19
122
 
20
123
 
124
+ Object.keys(data2Json).forEach(function(key) {
125
+
21
- <!-- ビューポートの設定 -->
126
+ $("#subtotal2").append(data2Json.map(
22
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
127
+ x => $(`<option value="${x.value}">${x.list}</option>`)));
128
+
129
+
130
+
131
+ });
132
+
133
+ Object.keys(data2Json).forEach(function(key) {
134
+
135
+ var d=$('<datalist id="list">').append(data2Json.map(x=>$(`<option value="${x.list}"</option>`)));
136
+ $("input#subtotal2").append(d);
137
+
23
138
 
24
-
25
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
26
-
27
- <title>デモ</title>
28
-
29
- <style>
30
- html{
31
- font-size:20px;
32
- }
33
- body{
34
- margin:30px;
35
- }
36
- main{
37
- background-color:#f8f8f8;
38
- padding:20px;
39
- }
40
- h2{
41
- font-size:22px;
42
- }
43
-
44
-
45
- select,input,textarea{
46
- font-family : inherit;
47
- font-size:20px;
48
-
49
-
50
- padding:3px;
51
- border:1px solid black;
52
- vertical-align:middle;
53
- }
54
- #subresult1:after{
55
- content:"円";
56
- }
57
- </style>
58
- </head>
59
- <body>
60
-
61
-
62
-
63
- <main>
64
- <h1 style="color:black;">DEMO</h1>
65
-
66
-
67
- <h2>データ名1</h2>
68
- <input type="text" id="subtotal1" list="list" style="width:200px;">
69
- <p id="subresult1">0</p>
70
-
71
-
72
- <HR style="margin: 2em 0 ;">
73
-
74
-
75
- </main>
76
-
77
-
78
-
79
-
80
-
81
-
82
- <script>
83
-
84
- jQuery(function($){
85
-
86
- var sample_list= [
87
- {
88
- "list": "aA-3",
89
- "value": "300",
90
- "type":"3"
91
- },
92
- {
93
- "list": "いB-4",
94
- "value": "1000",
95
- "type":"4"
96
- },
97
- {
98
- "list": "うC-3",
99
- "value": "2000",
100
- "type":"3"
101
- },
102
- {
103
- "list": "え-4",
104
- "value": "300",
105
- "type":"4"
106
- },
107
- {
108
- "list": "sB-3",
109
- "value": "1000",
110
- "type":"3"
111
- },
112
- {
113
- "list": "cC-4",
114
- "value": "2000",
115
- "type":"4"
116
- }
117
- ];
118
-
119
- //1つめの計算
120
- $.getJSON("static/data1.json", function(sample_list){
121
- var d=$('<datalist id="list">').append(sample_list.map(x=>$(`<option value="${x.list}"</option>`)));
122
- $("input#subtotal1").append(d);
123
-
124
- $('input#subtotal1').change(function() {
125
- const value = $(this).val();
126
- const candidates = sample_list.filter(
127
- item => item.list == value);
128
- if (candidates.length > 0){
129
- $("#subresult1").text(candidates[0].value);
130
- //計算用変数Calc1に代入
131
- window.Calc1=candidates[0].value;
132
- window.hantei=candidates[0].type;
133
- console.log(hantei);
134
-
135
- window.changeValue = window.hantei;
136
-
137
-
138
- }else{
139
-
140
- }
141
-
142
- });
139
+ });
140
+
141
+
142
+
143
+
144
+
143
- });
145
+ });
144
-
145
- });
146
- </script>
146
+ </script>
147
- </body>
147
+ </body>
148
- </html>
148
+ </html>
149
149
  ```

1

追記

2020/09/26 02:30

投稿

Miii
Miii

スコア30

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,9 @@
3
3
  $.getJSON部分のコードの書き換えがうまくできません。
4
4
  json埋め込みのコードに書き換えて、以下のコードで動作するように書き換えたいです。
5
5
 
6
+ ※外部jsonデータを変数に入れたり、
7
+ 書き換えできるところはしています。
8
+
6
9
  ```html
7
10
  <DOCTYPE html>
8
11
  <html>