WindowsXP + Apache/2.0.55 + PHP/5.0.5 を使ってます。例えば以下のようなmdb(でも何でもいいですが)があったとして、プルダウンメニューを3つ作り、大分類が選択されたら中分類・小分類のプルダウンメニューが新しく生成されて中分類にフォーカスが移され、中分類を選択したら小分類のプルダウンメニューが新しく生成されて小分類にフォーカスが移され、みたいな事をしたいんですが、指針もしくは参考URLなどを教えてください。
"ID""大分類""中分類""小分類""名前"
1"動物""哺乳類""ヒト科""ヒト"
2"動物""哺乳類""サル科""オランウータン"
3"動物""哺乳類""サル科""ニホンザル"
4"動物""哺乳類""ネコ科""ライオン"
5"動物""哺乳類""ネコ科""ネコ"
6"動物""両生類""カエル科""ウシガエル"
7"動物""両生類""カエル科""トノサマガエル"
8"植物""種子植物""被子植物""アサガオ"
9"植物""種子植物""被子植物""チューリップ"
10"植物""裸子植物""裸子植物""マツ"
11"植物""裸子植物""裸子植物""スギ"
12"植物""その他""シダ植物""ワラビ"
13"植物""その他""シダ植物""ゼンマイ"
14"植物""その他""細菌類""ナットウキン"
15"植物""その他""細菌類""ニュウサンキン"
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
前回、書いたものは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>
.
No.3
- 回答日時:
No2の補足ですが、お分かりと思いますが
ary[0]~ary[14]などの部分は数に制限はありません。
基本的に100だろうが1000だろうが機能すると思います。
配列への書出しは、DBの内容をPHPで読み出して
html内に直接記述させても良いし、
外部jsファイルなどに書き出しても良いと思います。
.
No.2
- 回答日時:
私もリストの絞込みは作ったことがなく
なんとなく興味がわいたので
実際に作ってみました。
試作なので綺麗に書けてませんが
ご参考まで・・・
<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>
No.1
- 回答日時:
JavaScriptでよければ、下記のサイトの30を参考にしてください。
フォーカスあわせもこのサイトに詳しく書いていますよ。
参考URL:http://www.usagi-js.com/sample/jssample5.htm
ありがとうございます。参考サイトの例では東京のみを扱っているようですが、全国に広げるとソースが膨大になり、DBと連携しないと実用的には無理そうですね。逆に簡単には出来ない事が分かって助かりました。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(悩み相談・人生相談) シダ植物、コケ植物、単子葉類、双子葉類のどれか 1つでもいいので語呂合わせをお願いします! 1 2022/06/17 07:20
- R&B・ヒップホップ 曲名を教えてください。 歌詞は結構覚えてます。 確かラップです。韻を踏んでいます。 歌詞 植物分類す 2 2022/08/21 00:20
- 中学校 シダ植物、コケ植物、単子葉類、双子葉類の どれか1つでもいいので花の語呂合わせをお願いします! 1 2022/06/17 07:21
- ガーデニング・家庭菜園 写真の植物は何と言う植物でしょうか。 庭のチューリップの横に生えている子の種類草です。 3 2022/04/19 18:14
- 生物学 高校生物の質問です。 1 2023/01/03 17:27
- 生物学 知的レベルが極端に低い、或いはゼロな生命程、正しい選択をしているように見えるのは何故ですか? 例えば 1 2023/05/25 11:27
- 哲学 知的レベルが極端に低い、或いはゼロな生命程、正しい選択をしているように見えるのは何故ですか? 例えば 2 2023/05/25 10:59
- その他(職業・資格) 危険物_第四類危険物の7分類に水溶性と非水溶性の性質についてかかれているのですが、その欄が空欄になっ 1 2023/05/18 14:57
- ガーデニング・家庭菜園 エビネラン、シラン、オリヅルランの土について 1 2022/09/17 09:33
- 猫 子猫が下痢(軟便)にならない良いフードはありますか? 3 2023/05/21 08:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLですCSSです この画像のよ...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
ウィンドウサイズを無視して、D...
-
フッターの下に隙間ができてしまう
-
Webサイト作成 プログレスバー ...
-
css固定したフッターが本文と重...
-
サイトの背景色をグラデーショ...
-
2行目のブラウザ表示以上を省略
-
PCサイズで赤い画像2つと、青い...
-
レイアウトが崩れないようにす...
-
チェックボックスの背景色って...
-
MAX関数を使ってからLEFT JOIN...
-
Javascript で共通の処理をどこ...
-
jspでcssが読み込めない
-
1枚の画像をクリックして複数の...
-
読み込んだQRコードをフォーム...
-
JSPでの画像ファイル表示
-
【jQuery】遅延実行(タイムラ...
-
画像をクリックすると音が鳴り...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
スクロール可能なチェックボックス
-
【CSS】floatで左右に並べた...
-
floatさせたdivタグを折り返さ...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
チェックボックスの背景色って...
-
1行で左寄せと右寄せと中央揃え...
-
左○○px、右は残りの幅(100%-左...
-
メニューやヘッダー背景だけを...
-
CSSでdivのheightを動的に
-
html スクロール要素を下から表...
-
文字をクリックしたら別の文字...
-
textareaで入力した文字を改行...
-
https://でのレイアウト崩れを...
-
文字を固定したいのですが…
-
オンマウス時に別画像を上に重...
-
レイアウトが崩れないようにす...
-
画像の特定の座標にカーソルが...
おすすめ情報