セレクトメニューに文字列をセットする方法

質問

JavaScriptを勉強し始めてまだ１ヵ月の初心者です。
どうしても分からず先に進めません。どうか、教えて下さい。
よろしくお願い致します。

下記の文字列を配列や連想配列などを使用して、二段構えのセレクトメニューを作成したいのです。
ちなみに、ＰＨＰでHIDDENを使用して文字列をセットしています。

A0,0001,あああ,A0,0002,いいい,B0,1111,かかか,
B0,1112,ききき,B0,1113,くくく,C0,1500,さささ…

このような文字列を使用し、「A0,0001,あああ」が１レコードのイメージです。

一つ目のセレクトメニューで、頭のA0,B0,C0…を選択し、さらに二つ目のセレクトメニューでは、
一つ目で選択したものによって選択されたものの後半部分がそれぞれメニューに表示されるようにしたいのです。

自分なりにいろんなサイトや書籍で調べてみたのですが、分かりませんでした。
質問の内容も分かり難いかと思いますが、どうぞ宜しくお願い致します。

回答No.2

yambejp · ベストアンサー

とりあえず以下のような形で動くとおもいますが、
PHPで組んでいるなら明らかにPHP側で処理をしたほうが
確実です。

<script language="javascript">
window.onload=function(){
str=document.getElementById("data").value;
list1=str.split(",");
list2=new Object();
for(var i=0;i<list1.length;i+=3){
str2=list1[i];
if(typeof list2[str2]=="undefined") list2[str2]=new Array();
list2len=list2[str2].length
list2[str2][list2len]=new Object();
list2[str2][list2len].value=list1[i+1]
list2[str2][list2len].text =list1[i+2]
}
var menu1="<select onChange='setMenu2(this)'>";
menu1+="<option value=''>選択してください</option>"
for(var i in list2){
menu1+="<option value='"+i+"'>"+i+"</option>";
}
menu1+="</select>";
document.getElementById("menu1").innerHTML=menu1
}

function setMenu2(obj){
var v=obj.value
var menu2="<select onChange='alert(this.value)'>";
menu2+="<option value=''>選択してください"
for(var i=0;i<list2[v].length;i++){
menu2+="<option value='"+list2[v][i].value+"'>"+list2[v][i].text;
}
menu2+="</select>";
document.getElementById("menu2").innerHTML=menu2
}
</script>
<form>
<input type="hidden" id="data" value="A0,0001,あああ,A0,0002,いいい,B0,1111,かかか,B0,1112,ききき,B0,1113,くくく,C0,1500,さささ">
<div id="menu1"></div>
<div id="menu2"><select><option>選択してください</option></select></div>
</form>

お礼

詳しい解説ありがとうございます!!
無事動作いたしました。
教えて頂いた方法があるなんてとても勉強になりました。
差し支えなければ今後のためにPHP側の処理の方法を教えてもらいたいのですが、よろしければお願いいたします。
本当にありがとうございました。

回答No.1

BLUEPIXY

セレクトメニューを絞り込むようなものは、何回か質問に挙がっています。
手前味噌ですが、以下が参考になるかもしれません。
http://okwave.jp/qa1469713.html

参考URL：

http://okwave.jp/qa1469713.html

お礼

ご回答ありがとうございます。これを参考にがんばってみます。