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

解決済

質問者：morizoukun
質問日時：2006/10/04 00:34
回答数：2件

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

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

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

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

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

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

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2006/10/04 11:31

とりあえず以下のような形で動くとおもいますが、

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>