- ベストアンサー
OK Webの新規質問時のプルダウン
宜しくお願いします。 まさにこのOKWebで、新規で質問する際にカテゴリの選択をすると思うのですが、その時と同じ仕組みのプルダウンメニューが作りたいのですが、良く分かりません。 二つのプルダウンメニューがあり、一個目を選択するとリアルタイムに二個目のメニューが切り替わるといったプルダウンです。 どなたかヒントでも教えていただけないでしょうか？宜しくお願いしますm(__)m
- nikuq
- お礼率75% (477/631)
- JavaScript
- 回答数4
- ありがとう数8
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
submitなしにリアルタイムで変更しなければならないなら、 やはり全選択肢をHTMLに抱えるしかないですね。 ざっと作ってみましたが、こんな感じでどうでしょうか？ (ちゃちゃっと作ったのできれいじゃないですが…) ----------------------------------------------------- <html> <head> <script> <!-- /* データ定義部(ここをDB検索結果から生成) */ var dataMain = new Array( new Array("1", "くだもの"), new Array("2", "やさい"), new Array("3", "さかな") ); var dataSub = new Array( new Array( new Array("1", "りんご"), new Array("2", "みかん"), new Array("3", "いちご") ), new Array( new Array("1", "にんじん"), new Array("2", "だいこん"), new Array("3", "きゅうり") ), new Array( new Array("1", "さば"), new Array("2", "いわし"), new Array("3", "さんま") ) ); // プルダウンを初期化 function initSel() { var selMain = document.forms[0].elements["selMain"]; // メインのプルダウンを初期化 setDataToSel(selMain, dataMain); // 先頭を選択 selMain.selectedIndex = 0; // 先頭を選択したのと同じ処理 changeSel(); } // プルダウンを選択したときの処理 function changeSel() { var selMain = document.forms[0].elements["selMain"]; var selSub = document.forms[0].elements["selSub"]; // メインのプルダウンの選択値によりサブの選択肢データを取得 var data = dataSub[selMain.selectedIndex]; // サブのプルダウンの選択肢を入れ換え setDataToSel(selSub, data); } // データを選択肢にセット function setDataToSel(sel, data) { // 選択肢をいったんクリア for(var i = 0 ; i < sel.options.length ; i++) { sel.options[i] = null; } // 新しい選択肢を作る for(var i = 0 ; i < data.length ; i++) { var dt = data[i]; sel.options[i] = new Option(dt[1], dt[0]); } } //--> </script> </head> <body onLoad="initSel()"> <form> <p> メイン： <select name="selMain" size="1" onChange="changeSel()"></select> </p> <p> サブ： <select name="selSub" size="1"></select> </p> </form> </body> </html>
その他の回答 (3)
- osumitan
- ベストアンサー率33% (102/307)
PHPで処理するのであれば、その仕組みを作るのに とくにJavascriptの処理は必要ないと思います。 単純に、データベースから取得した選択肢の一覧情報から、 <SELECT>タグの中の<OPTION>タグを作ればＯＫでしょう。 ２つ目のプルダウンには、１つ目のプルダウンで選んだものに 属する選択肢だけがあればいいんですよね？
お礼
ありがとうございます。 その通りなんですが、一個目のプルダウンを選んだ時点で、リアルタイムに二個目が変わらないとダメなんです。PHPの様に、ユーザーが『送信』などでsubmitしてから反映されるのではなく、選んでページをリロードせずにその瞬間に反映させたいので、PHPだけでは無理かと思ったんです。
- osumitan
- ベストアンサー率33% (102/307)
PHPでSQLを投げるのはサーバ処理になります。 Javascriptはあくまでブラウザ上で動くだけの クライアント側での処理になります。 ですので、以下の２つのいずれかになります。 ・onChange等でsubmitし、プルダウンの選択肢が該当するものになるように、PHPから応答を返す。 ・最初から全パターンをJavascriptに持たせておき、submitせずにJavascriptで切り替える。 前者は通信が行われてしまいます。 後者は全データをブラウザに抱えなければなりません。 データ量が多ければ前者、少なければ後者を選ぶのがいいと思います。
お礼
ありがとうございます！ 最初からJavaに含ませるには点数が多いので、そのページへアクセスした時にPHP上でMySQLから必要な項目をHTML上に展開して、その内容をJavaScriptでプルダウンに反映させられる様な仕組みを作りたいです。 JavaScriptに関しては知識がない為、さっぱりピンと来ないのです。 なんとなく、PHPでHTML上に展開している情報をグループ分けしてnameで分けて、一個目のプルダウンで選んだ項目と同じnameのあるグループの内容を二個目のプルダウンにロードするような仕組みで可能だと思うのですが、その仕組みをJavaScriptで組めるかとなると、分からないのです。。。 もうちょっとヒント頂けると助かります。宜しくお願いします！！
参考URLの例文集の 「フォーム／セレクトメニュー編」の 「［１５］セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する」 あたりが参考になると思います。
お礼
ありがとうございます！ 早速参考URLをみさせて頂きました。 まさにこの方法だ！っと思っていろいろ確かめたのですが、うまくいかなかったのです。 実は、PHPで、SQLから引っ張ってきた内容を反映させたかったので、このやり方だと項目数が決まってしまい、思っている動きにはならなそうでした。。。 JavaScriptで、Aの項目をえらんだら、それに連動したBの項目をPHPファイルの特定の場所から読み込んでプルダウンメニューに表示するといった動きがしたいです。 onChangeハンドラで何とか出来ないかと模索しております。。。
お礼
ありがとうございます！ 早速やってみました！バッチシできました！！ もうちょっと加工したらうまくいきそうです。 ほんとに助かりましたーm(__)m