CSVファイルを読みこみ、プルダウンを連動したい

締切済

質問者：babako
質問日時：2021/05/10 15:53
回答数：2件

こんにちは、
初心者で色々なサイトを参考に作成しているのですが、どれもうまくいかず、助けて下さい。
phpとjavascriptをを用いて
csvを読み込みし、csvから連動したプルダウンを作りたいです。
例えば、csv からプルダウンにて
都道府県を選択し
その都道府県の中から市町村を選択すると
何曜日が来場可能かが選択できるようにしたいのです。

test.csv
1,東京都,江戸川区,月曜日
1,東京都,江戸川区,火曜日
1,東京都,練馬区,水曜日
1,東京都,練馬区,木曜日
2,埼玉県,川口市,金曜日
2,埼玉県,川口市,土曜日

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.2

回答者： fujillin
回答日時：2021/05/11 15:01

こんにちは

検索すれば、いろいろ見つかると思いますし、「セレクトの連動」はさほど特殊な例ではないので、ライブラリ化したものもいろいろあるようです。
（少し旧い例ですが）
https://mars-2.hatenadiary.org/entries/2007/11/09
https://nodoame.net/archives/4593

phpからhtmlを出力しているのなら、データを直接スクリプト内に書き出しても良いですし、別ファイルにする場合は、js形式にしておけばscriptタグでそのまま読み込むことが可能です。
テキストファイルのままの場合は、HttpRequestで読み込むことも可能ではあります。

条件が不明なので、以下に、スクリプトから読み込む簡単な例を。
・テキストデータの1項目目の意味が不明ですが、とりあえずそのまま。
・データは、ご提示の形式（カンマ区切りクォーテーションなし）で、
　htmlと同じフォルダにあると仮定。
・データチェックは行っていません。整合のとれたデータが前提です。
・同期読込みにしてしまいましたが、「非推奨」になったようなので、
　非同期に書き換えた方が宜しいかも知れません。

以下ご参考までに。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#hoge select{ width: 8em; margin-right: 2em; }
</style>
</head>
<body>
<form id="hoge">
<select name="select1"></select>
<select name="select2"></select>
<select name="select3"></select>
</form>

<script>
const req = new XMLHttpRequest();
req.open('GET', './test.csv', false);
req.send();
const data = req.responseText.replaceAll('\r','').
split('\n').map(d => d.split(',')).filter(d => d.length>1);

const S = {
elms: [...document.querySelectorAll('#hoge select')],
clear: m => { S.elms[m].innerHTML = "" },

choose: m => {
const c = {}, sVal = S.elms.map( e => e.value );
data.forEach( d => {
let f = true;
for( let i = 1; i <= m; i++) if(d[i] != sVal[i - 1]) f = false;
if(f) c[d[m+1]] = 1;
});
return c;
},

set: m => {
S.clear(m);
for( const k in S.choose(m)){
const opt = `<option value="${k}">${k}</option>`;
S.elms[m].insertAdjacentHTML('beforeend', opt);
}
if(m+1 < S.elms.length) S.set(m+1);
}
};

S.set(0);
document.getElementById('hoge').addEventListener('change', e => {
const m = S.elms.indexOf(e.target);
if(m>-1 && m+1 < S.elms.length) S.set(m + 1);
});
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
セレクト連動はいただいたURLは存じておりました。
すでにできてはいたのですが、
PHPやjavascriptの知識がない方がcsvで編集してきたものを
いただくので、いちいち変更するのが面倒で、直接できないものかと
考えていました。
上記で動かしてみましたが、うまくいかず、いろいろ試してみます。

ありがとうございました。

通報する

お礼日時：2021/05/19 11:16