プルダウンとCSVの連動

質問

いつもお世話になります。
質問なんですが、２つのプルダウンがあり
1つ目のプルダウンの選択で二つ目のプルダウンにCSVから読み込んだ選択肢を出したいのですが
どうすればいいですか？
ソースの中に打ち込むとものすごい量になるので質問させていただきました。
1つ目プルダウンで「パン」を選んだとすると2つ目のプルダウンではpan.csvからパンの名前が表示されると言うものにしたいのですが可能でしょうか？

回答No.3

yambejp

ざっとした流れ

(1)メインページ、ajaxのライブラリ、csvのローダー、csvファイルを用意します。
(2)メインページにajaxライブラリを組み込み、selectのonchangeを設定します
(3)onchangeでcsvのローダーをよみます
(4)csvのローダーはパラメータをつかってselectをつくって文字列を返します
(5)csvのローダーから受け取ったらajaxライブラリはメインページにselectを表示します

※注意：
メインページとcsvファイルの文字コードが違うと文字化けする可能性があります
csvローダーで適正なヘッダをつけてやるといいかもしれません
ajaxのライブラリは公開された所定のものを利用してください、今回は簡易版を載せておきます

以下、サンプル
//main.htm
<script src="ajax.js"></script>
<script>
function changeFunc(obj,targetID){
var url="csvselectloader.php?file="+obj.value+"&name=y";
getData(url,targetID);
}
</script>
<form>
<span>
<select name="x" onchange="changeFunc(this,'hoge')">
<option value="">選択してください</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
<span id="hoge"></span>
</form>

//ajax.js（ajaxライブラリ）
function createXMLHttpRequest(){
if( window.XMLHttpRequest ){
return new XMLHttpRequest();
}else if( window.ActiveXObject ){
try{
return new ActiveXObject( "Msxml2.XMLHTTP" );
}catch(e){
return new ActiveXObject( "Microsoft.XMLHTTP" );
}
}
return null;
}
function getData_setValue( serverURL, objID ){
var ajax = createXMLHttpRequest();
ajax.open( "GET", serverURL );
ajax.onreadystatechange=function(){
if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){
if(objID!=""){
var obj = document.getElementById( objID );
obj.value = ajax.responseText;
}
}
}
ajax.send( '' );
}
function getData( serverURL, objID ){
var ajax = createXMLHttpRequest();
ajax.open( "GET", serverURL );
ajax.onreadystatechange=function(){
if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){
if(objID!=""){
var obj = document.getElementById( objID );
obj.innerHTML = ajax.responseText;
}
}
}
ajax.send( '' );
}
function getDataPost( serverURL, objID ){
var ajax = createXMLHttpRequest();
ajax.open( "POST", serverURL );
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange=function(){
if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){
if(objID!=""){
var obj = document.getElementById( objID );
obj.innerHTML = ajax.responseText;
}
}
}
ajax.send(obj.name+"="+obj.value);
}

//csvselectloader.php (csvのローダー)
<?PHP
function main(){
$name=(isset($_REQUEST["name"]) and $_REQUEST["name"]!=="" )?$_REQUEST["name"]:NULL;
$file=(isset($_REQUEST["file"]) and preg_match("/^\d+$/",$_REQUEST["file"]))?$_REQUEST["file"]:NULL;
$value=isset($_REQUEST["value"])?$_REQUEST["value"]:NULL;
$filename=$file.".csv";
if(!file_exists($filename)) $file=NULL;
if(is_null($name) or is_null($file)) exit;
header("Content-Type: text/html; charset=UTF8");//適正な文字コードを指定
$h=fopen($filename,"r");
$str="<select name=\"".htmlspecialchars($name)."\">\n";
while (($data = fgetcsv($h, 1000, ",")) !== FALSE) {
$selected=$value===$data[0]?" selected":"";
$str.="<option value=\"".htmlspecialchars($data[0])."\"".$selected.">".htmlspecialchars($data[1])."</option>\n";
}
fclose($h);
$str.="</select>";
print $str;
}
main();
?>

//1.csv
1,テスト1-1
2,テスト1-2
3,テスト1-3
4,テスト1-4

//2.csv
1,テスト2-1
2,テスト2-2
3,テスト2-3
4,テスト2-4

//3.csv
1,テスト3-1
2,テスト3-2
3,テスト3-3
4,テスト3-4

回答No.2

singlecat

おそらくあなたのスキルでは
Ajaxとかは難しそうなので、
１画面１項目として、
２画面目以降は前画面でされた内容により選択肢をセットするのが良いと思います

回答No.1

shimix

まずは「プルダウン Ajax」とかで検索して「どうやって入れ替えるのか」を理解しておくべきだと思います。