- 締切済み
大分類・中分類・小分類
WindowsXP + Apache/2.0.55 + PHP/5.0.5 を使ってます。例えば以下のようなmdb（でも何でもいいですが）があったとして、プルダウンメニューを３つ作り、大分類が選択されたら中分類・小分類のプルダウンメニューが新しく生成されて中分類にフォーカスが移され、中分類を選択したら小分類のプルダウンメニューが新しく生成されて小分類にフォーカスが移され、みたいな事をしたいんですが、指針もしくは参考ＵＲＬなどを教えてください。 "ID" "大分類" "中分類" "小分類" "名前" 1 "動物" "哺乳類" "ヒト科" "ヒト" 2 "動物" "哺乳類" "サル科" "オランウータン" 3 "動物" "哺乳類" "サル科" "ニホンザル" 4 "動物" "哺乳類" "ネコ科" "ライオン" 5 "動物" "哺乳類" "ネコ科" "ネコ" 6 "動物" "両生類" "カエル科" "ウシガエル" 7 "動物" "両生類" "カエル科" "トノサマガエル" 8 "植物" "種子植物" "被子植物" "アサガオ" 9 "植物" "種子植物" "被子植物" "チューリップ" 10 "植物" "裸子植物" "裸子植物" "マツ" 11 "植物" "裸子植物" "裸子植物" "スギ" 12 "植物" "その他" "シダ植物" "ワラビ" 13 "植物" "その他" "シダ植物" "ゼンマイ" 14 "植物" "その他" "細菌類" "ナットウキン" 15 "植物" "その他" "細菌類" "ニュウサンキン"
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- arenani_sorenani
- ベストアンサー率73% (58/79)
前回、書いたものはinnnerTextのせいでIE以外では 動作しなかったようなので直しました。 <html> <head> <script> ary=new Array(); ary[0] =["動物","哺乳類","ヒト科","ヒト"]; ary[1] =["動物","哺乳類","サル科","オランウータン"]; ary[2] =["動物","哺乳類","サル科","ニホンザル"]; ary[3] =["動物","哺乳類","ネコ科","ライオン"]; ary[4] =["動物","哺乳類","ネコ科","ネコ"]; ary[5] =["動物","両生類","カエル科","ウシガエル"]; ary[6] =["動物","両生類","カエル科","トノサマガエル"]; ary[7] =["植物","種子植物","被子植物","アサガオ"]; ary[8] =["植物","種子植物","被子植物","チューリップ"]; ary[9] =["植物","種子植物","裸子植物","マツ"]; ary[10] =["植物","種子植物","裸子植物","スギ"]; ary[11] =["植物","その他","シダ植物","ワラビ"]; ary[12] =["植物","その他","シダ植物","ゼンマイ"]; ary[13] =["植物","その他","細菌類","ナットウキン"]; ary[14] =["植物","その他","細菌類","ニュウサンキン"]; function start() { clearList1(); clearList2(); clearList3(); clearList4(); makeList1(); } function clearList1() { obj=document.forms[0]; for (i=obj.s1.options.length;i>=1; i--) { obj.s1.options[i] = null; } } function clearList2() { obj=document.forms[0]; for (i=obj.s2.options.length;i>=1; i--) { obj.s2.options[i] = null; } } function clearList3() { obj=document.forms[0]; for (i=obj.s3.options.length;i>=1; i--) { obj.s3.options[i] = null; } } function clearList4() { obj=document.forms[0]; for (i=obj.s4.options.length;i>=1; i--) { obj.s4.options[i] = null; } } function makeList1(){ list1=new Array(); x=0; for(i=0;i<ary.length;i++){ flag=1; for(n=0;n<x;n++){ if(list1[n]==ary[i][0]){flag=0;} } if(flag){list1[x]=ary[i][0];x++;} } for(i=0;i<list1.length;i++){ document.forms[0].s1.options[i+1]=new Option(list1[i],i); } document.forms[0].s2.selectedIndex=0; document.forms[0].s3.selectedIndex=0; document.forms[0].s4.selectedIndex=0; document.forms[0].s1.focus(); } function makeList2(){ clearList2(); list2=new Array(); x=0; val1=document.forms[0].s1.options[document.forms[0].s1.selectedIndex].text; for(i=0;i<ary.length;i++){ if(ary[i][0]==val1){ flag=1 for(n=0;n<x;n++){ if(list2[n]==ary[i][1]){flag=0;} } if(flag){list2[x]=ary[i][1];x++;} } } for(i=0;i<list2.length;i++){ document.forms[0].s2.options[i+1]=new Option(list2[i],i); } document.forms[0].s3.selectedIndex=0; document.forms[0].s4.selectedIndex=0; document.forms[0].s2.focus(); } function makeList3(){ clearList3(); list3=new Array(); x=0; val1=document.forms[0].s1.options[document.forms[0].s1.selectedIndex].text; val2=document.forms[0].s2.options[document.forms[0].s2.selectedIndex].text; for(i=0;i<ary.length;i++){ if((ary[i][0]==val1)&&(ary[i][1]==val2)){ flag=1 for(n=0;n<x;n++){ if(list3[n]==ary[i][2]){flag=0;} } if(flag){list3[x]=ary[i][2];x++;} } } for(i=0;i<list3.length;i++){ document.forms[0].s3.options[i+1]=new Option(list3[i],i); } document.forms[0].s4.selectedIndex=0; document.forms[0].s3.focus(); } function makeList4(){ clearList4(); list4=new Array(); x=0; val1=document.forms[0].s1.options[document.forms[0].s1.selectedIndex].text; val2=document.forms[0].s2.options[document.forms[0].s2.selectedIndex].text; val3=document.forms[0].s3.options[document.forms[0].s3.selectedIndex].text; for(i=0;i<ary.length;i++){ if((ary[i][0]==val1)&&(ary[i][1]==val2)&&(ary[i][2]==val3)){ flag=1 for(n=0;n<x;n++){ if(list4[n]==ary[i][3]){flag=0;} } if(flag){list4[x]=ary[i][3];x++;} } } for(i=0;i<list4.length;i++){ document.forms[0].s4.options[i+1]=new Option(list4[i],i); } document.forms[0].s4.focus(); } </script> </head> <body onload="start()"> <form> <select name="s1" onChange="makeList2()" style="width:180px"><option value="0">----選択してください-----</option></select><br><br> <select name="s2" onChange="makeList3()" style="width:180px"><option value="0">----選択してください-----</option></select><br><br> <select name="s3" onChange="makeList4()" style="width:180px"><option value="0">----選択してください-----</option></select><br><br> <select name="s4" onChange=" " style="width:180px"><option value="0">----選択してください-----</option></select><br><br> </form> </body> <html> .
- arenani_sorenani
- ベストアンサー率73% (58/79)
No2の補足ですが、お分かりと思いますが ary[0]～ary[14]などの部分は数に制限はありません。 基本的に100だろうが1000だろうが機能すると思います。 配列への書出しは、DBの内容をPHPで読み出して html内に直接記述させても良いし、 外部jsファイルなどに書き出しても良いと思います。 .
- arenani_sorenani
- ベストアンサー率73% (58/79)
私もリストの絞込みは作ったことがなく なんとなく興味がわいたので 実際に作ってみました。 試作なので綺麗に書けてませんが ご参考まで・・・ <html> <head> <script> ary=new Array(); ary[0] =["動物","哺乳類","ヒト科","ヒト"]; ary[1] =["動物","哺乳類","サル科","オランウータン"]; ary[2] =["動物","哺乳類","サル科","ニホンザル"]; ary[3] =["動物","哺乳類","ネコ科","ライオン"]; ary[4] =["動物","哺乳類","ネコ科","ネコ"]; ary[5] =["動物","両生類","カエル科","ウシガエル"]; ary[6] =["動物","両生類","カエル科","トノサマガエル"]; ary[7] =["植物","種子植物","被子植物","アサガオ"]; ary[8] =["植物","種子植物","被子植物","チューリップ"]; ary[9] =["植物","種子植物","裸子植物","マツ"]; ary[10] =["植物","種子植物","裸子植物","スギ"]; ary[11] =["植物","その他","シダ植物","ワラビ"]; ary[12] =["植物","その他","シダ植物","ゼンマイ"]; ary[13] =["植物","その他","細菌類","ナットウキン"]; ary[14] =["植物","その他","細菌類","ニュウサンキン"]; function start() { clearList1(); clearList2(); clearList3(); clearList4(); makeList1(); } function clearList1() { obj=document.forms[0]; for (i=obj.s1.options.length;i>=1; i--) { obj.s1.options[i] = null; } } function clearList2() { obj=document.forms[0]; for (i=obj.s2.options.length;i>=1; i--) { obj.s2.options[i] = null; } } function clearList3() { obj=document.forms[0]; for (i=obj.s3.options.length;i>=1; i--) { obj.s3.options[i] = null; } } function clearList4() { obj=document.forms[0]; for (i=obj.s4.options.length;i>=1; i--) { obj.s4.options[i] = null; } } function makeList1(){ list1=new Array(); x=0; for(i=0;i<ary.length;i++){ flag=1; for(n=0;n<x;n++){ if(list1[n]==ary[i][0]){flag=0;} } if(flag){list1[x]=ary[i][0];x++;} } for(i=0;i<list1.length;i++){ document.forms[0].s1.options[i+1]=new Option(list1[i],i); } document.forms[0].s2.selectedIndex=0; document.forms[0].s3.selectedIndex=0; document.forms[0].s4.selectedIndex=0; document.forms[0].s1.focus(); } function makeList2(){ clearList2(); list2=new Array(); x=0; val1=document.forms[0].s1.options[document.forms[0].s1.selectedIndex].innerText; for(i=0;i<ary.length;i++){ if(ary[i][0]==val1){ flag=1 for(n=0;n<x;n++){ if(list2[n]==ary[i][1]){flag=0;} } if(flag){list2[x]=ary[i][1];x++;} } } for(i=0;i<list2.length;i++){ document.forms[0].s2.options[i+1]=new Option(list2[i],i); } document.forms[0].s3.selectedIndex=0; document.forms[0].s4.selectedIndex=0; document.forms[0].s2.focus(); } function makeList3(){ clearList3(); list3=new Array(); x=0; val1=document.forms[0].s1.options[document.forms[0].s1.selectedIndex].innerText; val2=document.forms[0].s2.options[document.forms[0].s2.selectedIndex].innerText; for(i=0;i<ary.length;i++){ if((ary[i][0]==val1)&&(ary[i][1]==val2)){ flag=1 for(n=0;n<x;n++){ if(list3[n]==ary[i][2]){flag=0;} } if(flag){list3[x]=ary[i][2];x++;} } } for(i=0;i<list3.length;i++){ document.forms[0].s3.options[i+1]=new Option(list3[i],i); } document.forms[0].s4.selectedIndex=0; document.forms[0].s3.focus(); } function makeList4(){ clearList4(); list4=new Array(); x=0; val1=document.forms[0].s1.options[document.forms[0].s1.selectedIndex].innerText; val2=document.forms[0].s2.options[document.forms[0].s2.selectedIndex].innerText; val3=document.forms[0].s3.options[document.forms[0].s3.selectedIndex].innerText; for(i=0;i<ary.length;i++){ if((ary[i][0]==val1)&&(ary[i][1]==val2)&&(ary[i][2]==val3)){ flag=1 for(n=0;n<x;n++){ if(list4[n]==ary[i][3]){flag=0;} } if(flag){list4[x]=ary[i][3];x++;} } } for(i=0;i<list4.length;i++){ document.forms[0].s4.options[i+1]=new Option(list4[i],i); } document.forms[0].s4.focus(); } </script> </head> <body onload="start()"> <form> <select name="s1" onChange="makeList2()" style="width:180px"><option value="0">----選択してください-----</option></select><br><br> <select name="s2" onChange="makeList3()" style="width:180px"><option value="0">----選択してください-----</option></select><br><br> <select name="s3" onChange="makeList4()" style="width:180px"><option value="0">----選択してください-----</option></select><br><br> <select name="s4" onChange=" " style="width:180px"><option value="0">----選択してください-----</option></select><br><br> </form> </body> <html>
- vivid8_tihiro
- ベストアンサー率13% (9/65)
JavaScriptでよければ、下記のサイトの30を参考にしてください。 フォーカスあわせもこのサイトに詳しく書いていますよ。
お礼
ありがとうございます。参考サイトの例では東京のみを扱っているようですが、全国に広げるとソースが膨大になり、ＤＢと連携しないと実用的には無理そうですね。逆に簡単には出来ない事が分かって助かりました。ありがとうございました。
お礼
ありがとうございます。参考にさせていただきます。