プルダウンとCSVの連動

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

No.3 回答者： yambejp 回答日時： 2012/06/19 12:48

ざっとした流れ

(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 回答日時： 2012/06/19 12:43

おそらくあなたのスキルでは

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

No.1 回答者： shimix 回答日時： 2012/06/19 09:46

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