- ベストアンサー
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ハンドラで何とか出来ないかと模索しております。。。
関連するQ&A
- 質問時のカテゴリーを表示しないのは何故
質問をするときにカテゴリーのプルダウンメニューを表示しないことが多く（メニューが真っ白）、止むを得ず関係の無いジャンルが選択されてしまうことがあるのですが、改善する方法はあるのでしょうか？ページを開きなおしたり、更新しても上手くいきません。宜しくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- プルダウンメニューから他のページへ移動するには？
先程ソフトウェアのページにも投稿したのですが、この『教えて！goo』の質問するカテゴリーを選択するプルダウンメニュー形式のページがありますよね？この様にしたいのです。 プルダウンメニュー（カテゴリーは２種類）とボタンまでは作成したのですが、メニューを選択しボタンをクリックすると他のページへ移動する・選択結果（４８パターンあります）によって移動するページが異なる。この様な設定にするにはどうすればよいのでしょうか？ よろしくお願いします。 ・ホームページビルダーを使っており、HTML・JavaScriptに関しては初心者です。
- ベストアンサー
- HTML
- ＰＨＰとプルダウンメニュー
ＰＨＰで以下のことをやりたいのですが、どうしてもうまく出来ません。経験の有る方、どうぞ宜しくお願い致します。 ２つのプルダウンメニューがあり、１つ目のプルダウンメニューから選択時、選択された値に関連する項目をＤＢより２つ目のプルダウンメニューに登録したいのです。 ちなみにＤＢはＯｒａｃｌｅを使用しています。 プルダウンメニューから選択時は、どのようなイベント（？）が発生するのでしょうか？ もし、ＰＨＰで出来ない場合、他にどのような方法がありますか？ 宜しくお願い致します。
- ベストアンサー
- PHP
- Ｗｅｂ上のプルダウンメニューをマウスホイールで動かしたくない。
ホームページ入力画面でよくあるプルダウンメニューですが、（例えば都道府県入力など）このメニューを選択した後、うかつにホイールを動かすと選択がくるくる変わってしまいます。いったん余白で1クリックすればいいのでしょうが面倒です。いっそプルダウンメニューをマウスホイールで動かせなくしたいのですが無理ですか？よろしくお願いいたします。 ※フリーソフトは除外でお願いいたします。
- 締切済み
- Windows XP
- プルダウンメニューの表示変更
アンケートを採る際にプルダウンメニューを使用したいのですが、 「大カテゴリ」－「小カテゴリー」という区分けをしようと思っています。 この場合、最初に「大カテゴリ」を選択したら「小カテゴリ」は自動的に「大カテゴリ」に対応したメニューのみに切り替えることは可能でしょうか？ 以下のようなイメージなのですが、どのような技術を使用するのかお教え頂ければ幸いです。 -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Ｑ．お出かけ先は？ 【大カテゴリ】 【小カテゴリ】 「遊園地」 → 「絶叫系」 → 「ほのぼの系」 → 「両方」 「生き物」 → 「動物園」 → 「水族館」 -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* 何卒宜しくお願い致します。
- ベストアンサー
- HTML
- 【再掲】プルダウンメニューの表示変更
http://okwave.jp/qa2610879.htmlで質問した者です。 karumakaruma 様に以下の御回答を頂いて下記の表示が出来たのですが、確認用画面に値を引き渡すことが出来なかったため再度質問です。 勝手に締め切ってしまった恐縮ですが、お教え頂ければ幸いです。 ■質問内容 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ アンケートを採る際にプルダウンメニューを使用したいのですが、 「大カテゴリ」－「小カテゴリー」という区分けをしようと思っています。 この場合、最初に「大カテゴリ」を選択したら「小カテゴリ」は自動的に「大カテゴリ」に対応したメニューのみに切り替えることは可能でしょうか？ 以下のようなイメージなのですが、どのような技術を使用するのかお教え頂ければ幸いです。
- ベストアンサー
- HTML
- プルダウンメニューの自動変更
プルダウンメニューＡとプルダウンメニューＢがあります。 プルダウンメニューＡでは「Ａ－１」と「Ａ－２」が、 プルダウンメニューＢでは「Ｂ－１」と「Ｂ－２」が 選択できるメニューとして指定されています。 プルダウンメニューＡで「Ａ－１」を選択すればプルダウンメニューＢで「Ｂ－１」が、 プルダウンメニューＡで「Ａ－２」を選択すればプルダウンメニューＢで「Ｂ－２」が 自動的に選択されるようにプログラムすることは可能でしょうか？ どなたかご教授ください。
- 締切済み
- JavaScript
- プルダウンで作文！？
こんにちは。 プルダウンの項目のvalue値をひとつのテキストフィールドに投げていって、文章を作ることは可能でしょうか？ たとえばプルダウンの項目に、 ・OKWEB ・質問 ・させて下さい。 三つの項目があったとして、それぞれ選んでいって一つのテキストフィールドに作文する｛ＯＫＷＥＢ質問させて下さい｝といったことなんですが・・・ 可能であれば、ご教授いただきますようお願いします。
- ベストアンサー
- JavaScript
- ２つのプルダウンメニューを使用したフレームラベルへの移動
はじめまして。 お世話になります。 Flashムービー内で ２つのプルダウンメニューを組み合わせた フレーム移動をさせたいのですが方法がわかりません。 例えば、 １つ目のプルダウン（「A」～「D」までアルファベット順のメニュー）で「A」を選択し、 ２つ目のプルダウン（「1」～「9」までの数字順のメニュー）で「1」を選択したら、「A1」というフレームラベルへジャンプするという仕組みを実装したいのですが、方法が分かりません。 プルダウンメニューが一つの場合だと任意のフレームラベルへジャンプさせるという方法は分かるのですが、２つを連動させるというのが、どうしても分かりません。 お教えいただけると大変助かります。 よろしくお願いいたします。
- 締切済み
- Flash
- プルダウンメニューが表示されない
カテゴリを間違えていたようなので再投稿です。 Internet ExplorerV6を使っているのですが、最近になってお気に入りの プルダウンメニューの中でフォルダで整理している部分の内容が見えません。 透明（枠らしきものは見える）ですが、その中でクリックするとそのHPには 移動できます。 マイドキュメントなどのフォルダを開いてからお気に入りのプルダウンメニューを 開くと全て表示されます。 また、WordやExcelなどもプルダウンメニューが透明で見えません。 こちらはメニュー内の項目を選択することもできません。 新しいソフトのインストールは行っていません。 Windowsのアップデートは行ってアップデートするものが無い状態にはなっています。
- 締切済み
- その他([技術者向] コンピューター)
お礼
ありがとうございます！ 早速やってみました！バッチシできました！！ もうちょっと加工したらうまくいきそうです。 ほんとに助かりましたーm(__)m