質問編集履歴
3
1つにまとめて試した記述を追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -117,6 +117,65 @@
|
|
|
117
117
|
|
|
118
118
|
### 試したこと
|
|
119
119
|
・jsファイルを1つにまとめる→読み込まれるcsvファイルが同一のものになってしまった。
|
|
120
|
+
```javascript
|
|
121
|
+
// csv読み込み関数
|
|
122
|
+
function readCsv(data) {
|
|
123
|
+
//検索結果用
|
|
124
|
+
var target = '.list'; //csvを表示するところ
|
|
125
|
+
var csv = $.csv.toArrays(data); //csv読み込み
|
|
126
|
+
var insert = ''; //作るhtmlを入れるやつ
|
|
127
|
+
for (var i = 0; i<csv.length;i++){
|
|
128
|
+
//htmlの要素
|
|
129
|
+
insert += ' <div class="item-list" data-no1="' + csv[i][0] + '" data-no2="' + csv[i][1] + '">';
|
|
130
|
+
insert += ' </div>';
|
|
131
|
+
}
|
|
132
|
+
//作ったhtmlを挿入
|
|
133
|
+
$(target).append(insert);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
//絞り込み項目用
|
|
137
|
+
var target2 = '.form'; //csvを表示するところ
|
|
138
|
+
var csv2 = $.csv.toArrays(data); //csv読み込み
|
|
139
|
+
var insert2 = ''; //作るhtmlを入れるやつ
|
|
140
|
+
for (var i = 0; i<csv2.length;i++){
|
|
141
|
+
insert2 += ' <div class="box">'
|
|
142
|
+
insert2 += ' <span class="label">' + csv2[i][0] + '</span>'
|
|
143
|
+
insert2 += ' <ul>'
|
|
144
|
+
for (var j = 1;j<csv2[i].length;j++){
|
|
145
|
+
insert2 += ' <li><label><input type="checkbox" name="' + csv2[i][j] + '" value="' + csv2[i][j] + '">' + csv2[i][j] + '</label></li>'
|
|
146
|
+
}
|
|
147
|
+
insert2 += ' </ul>'
|
|
148
|
+
insert2 += ' </div>'
|
|
149
|
+
}
|
|
150
|
+
//作ったhtmlを挿入
|
|
151
|
+
$(target2).append(insert2);
|
|
152
|
+
|
|
153
|
+
//csvを読み込む
|
|
154
|
+
$(document).ready(function(){
|
|
155
|
+
//検索結果用
|
|
156
|
+
var csvfile = 'list.csv';
|
|
157
|
+
$.get(csvfile, readCsv, 'text');
|
|
158
|
+
|
|
159
|
+
$('input[name="no1"]').change(function() {
|
|
160
|
+
var val = $(this).val();
|
|
161
|
+
if (val == 'テストA') {
|
|
162
|
+
var csvfile2 = 'form1.csv';
|
|
163
|
+
$.get(csvfile2, readCsv, 'text');
|
|
164
|
+
} else if (val == 'テストB') {
|
|
165
|
+
var csvfile2 = 'form2.csv';
|
|
166
|
+
$.get(csvfile2, readCsv, 'text');
|
|
167
|
+
}
|
|
168
|
+
$(".form").empty();
|
|
169
|
+
});
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
//読み込みが完了したら
|
|
173
|
+
$(document).ajaxStop(function() {
|
|
174
|
+
|
|
175
|
+
});//読み込みが終わったらここまで
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
|
|
120
179
|
・下記ページなどを参考に修正を試みましたが②のcsvの切り替えの記述がわからず断念
|
|
121
180
|
https://teratail.com/questions/183007
|
|
122
181
|
|
2
説明に余計な情報があってわかりづらかったので、修正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
**結論**
|
|
3
|
-
javascriptでcsvを複数読み込
|
|
3
|
+
javascriptでcsvを複数読み込んでページ上に表示させる。
|
|
4
4
|
|
|
5
5
|
**説明**
|
|
6
|
-
|
|
6
|
+
csvファイルを読み込んで、ページ上で表示させたいのですが、読み込みたいcsvが複数あります。
|
|
7
|
-
|
|
7
|
+
また、1つのcsvファイルは固定で読み込みますが、もう1つのcsvファイルは、選択しているラジオボタンによって読み込むファイルを変更させたいです。
|
|
8
|
-
・①
|
|
8
|
+
・①list.csv → 常時読み込んで表示させる内容
|
|
9
|
-
・②
|
|
9
|
+
・②form1.csv, form2.csv … → ラジオボタンの項目によって読み込む内容
|
|
10
|
-
※絞り込み1つ目の項目により、2つ目以降の項目を切り替えるためにそれぞれのcsvを作成。
|
|
11
|
-
※1つ目の項目はhtmlにて記述→ラジオボタンのname値によって②の読み込むcsvを切り替える
|
|
12
|
-
- 検索のシステムは別途jsファイルを読み込んでいます。
|
|
13
10
|
|
|
11
|
+
上記それぞれを読み込むためのjsファイルを作成しています。
|
|
12
|
+
|
|
14
13
|
**前提**
|
|
15
14
|
アップロードするサーバーではphpなどは使用できない
|
|
16
15
|
ページ内で検索フォームと検索結果を両方表示させる必要がある
|
1
タイトルの修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
jQueryで複数のcsvを読み込
|
|
1
|
+
jQueryで複数のcsvを読み込んでページ上に表示させる
|
body
CHANGED
|
File without changes
|