大分類・中分類・小分類

質問・疑問に答えるQ&AサイトOKWave

OKWave

[ 詳しく ]

FAQ（よくある質問）

法人向けサービス

質問する

○○だけど・・・？

締切り済みの質問

Check

印刷

<< 前の質問 | 次の質問 >>

大分類・中分類・小分類

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"植物""その他""細菌類""ニュウサンキン"

投稿日時 - 2006-01-30 20:36:50

連想キーワード：

通報する

QNo.1932311

taropoo

すぐに回答ほしいです

ブックマーク

はい

3人が「このQ&Aが役に立った」と投票しています

[ 前へ | 次へ ]

回答（4件中　1～4件目)

ANo.4

arenani_sorenani

前回、書いたものは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>

.

投稿日時 - 2006-02-04 22:15:22

お礼する

回答を評価する（0）

通報する

ANo.3

arenani_sorenani

No2の補足ですが、お分かりと思いますが

ary[0]～ary[14]などの部分は数に制限はありません。
基本的に100だろうが1000だろうが機能すると思います。

配列への書出しは、DBの内容をPHPで読み出して
html内に直接記述させても良いし、
外部jsファイルなどに書き出しても良いと思います。

.

投稿日時 - 2006-02-02 18:30:54

お礼する

回答を評価する（0）

通報する

ANo.2

arenani_sorenani

私もリストの絞込みは作ったことがなく
なんとなく興味がわいたので
実際に作ってみました。
試作なので綺麗に書けてませんが
ご参考まで・・・

<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>