- ベストアンサー
mysqlからのコンボボックスについて教えてください
- 初心者の方でも分かりやすく解説します。mysqlとphpを使用して連動したコンボボックスを作成する方法をお伝えします。
- 連動したコンボボックスを作成するためには、[table 1]と[table 2]の関連付けが必要です。種類を選択するコンボボックス1と、種類に応じた名前を選択するコンボボックス2を連動させる方法を解説します。
- mysqlのバージョンや環境に合わせたコンボボックスの連動方法を説明します。連動させるために必要なデータベースのテーブル設計やphpのコードなども詳しく解説します。
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
【step1：サーバー】 mysqlから種類table1についてセレクトして セレクトタグ(仮：name="kind")を生成して画面出力 【step1-1:クライアント】 セレクトタグを選択してSubmitクリック 【step2：サーバー】 送られてきたkindの値をキーにtable2をセレクト select id,name from table2 where key= $_XXX['kind'] order by id この結果を元に次のセレクトタグを生成して画面出力 ・・・・・・ この動作範囲内でしたならjavaScriptは不要ですね。 クライアントから送られてきたデータ（kindとか）については 適切な妥当検査処理を施すことを忘れずに。
その他の回答 (7)
- gama001
- ベストアンサー率50% (3/6)
かえって混乱させてしまったようで申し訳在りませんでした。 SELECTのonChangeについては ここに質問と回答があります。
- gama001
- ベストアンサー率50% (3/6)
さらに補足２として javaScriptでtableを動的に変更するサンプルを書いておきます。 テーブルの内容に応じて OptionSet1の中のswitch 部分をPHPでゴリゴリ生成すればクライアントのみで動作します。 <html> <head> <title>select test</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <!-- javaScriptによるセレクトタグ連動サンプル --> <script LANGUAGE="JavaScript"> <!-- function SelChange1() { ps_selectNo = document.fm1.sel_tenpo.options.selectedIndex; ps_sel_val = document.fm1.sel_tenpo.options[ps_selectNo].value; OptionSet1(ps_sel_val); } function OptionSet1 (SelVal) { switch (SelVal) { case '10': sel_opt = new Option("にんじん","1020",true,true); document.fm1.sel_user.options[0]=sel_opt; sel_opt = new Option("たまねぎ","1021"); document.fm1.sel_user.options[1]=sel_opt; sel_opt = new Option("ほうれん草","1021"); document.fm1.sel_user.options[2]=sel_opt; document.fm1.sel_user.length=3; break; case '11': sel_opt = new Option("りんご","1120",true,true); document.fm1.sel_user.options[0]=sel_opt; sel_opt = new Option("バナナ","1121"); document.fm1.sel_user.options[1]=sel_opt; document.fm1.sel_user.length=2; break; case '12': sel_opt = new Option("うどん","1220",true,true); document.fm1.sel_user.options[0]=sel_opt; sel_opt = new Option("そば","1221"); document.fm1.sel_user.options[1]=sel_opt; sel_opt = new Option("ラーメン","1222"); document.fm1.sel_user.options[2]=sel_opt; document.fm1.sel_user.length=3; break; } } // --> </script> </head> <body bgcolor="#EEFFFF"> <form method="post" action="jtst.php3" name="fm1"> <select name="sel_tenpo" onChange="SelChange1()"> <option value="10">野菜</option> <option value="11">果物</option> <option value="12">麺</option> </select> ＞ <select name="sel_user"> <option value="1020">にんじん</option> <option value="1021">たまねぎ</option> <option value="1022">ほうれん草</option> </select> <br> <input type="submit" value="sub"> </form> <br> </body> </html> （もうPHPの話じゃないですね＾＾；）
お礼
gama001様、ご教授ありがとうございます。 JavaScriptでの連動は出来ました＾＾ ありがとうございます。 しかし、色々と試行錯誤してみたところ 現状では、一番最初のページであります「index.php」を開くと同時に、mysqlに登録してあるセレクトボックス用のtable1とtable2が選択できるように、連動はしていませんが、むき出しに表示されています。 上記のような現状からの改良が混乱してしまったので、また最初に戻して、考え始めました。 というのも、クライアント側のみだけで処理せず、 そんなにサーバに負担がかからない程度のDBに収まりそうなので、table1のセレクトフォームで選択した後、一度、DBへ問い合わせ、そして、table2のセレクトフォームで、table1に対応する種類を表示しようと思います。 なので、gama001様が、以前お答えしてくれたやり方に近い状態で再挑戦してみようと思っています。 お手数をおかけしてしまい申し訳なかったです。 ありがとうございました。頑張ってみます。
- gama001
- ベストアンサー率50% (3/6)
あれれれれ？ となるとこうですか 【step1-1：クライアント】 table1についてのセレクトタグを選択 ＊A.ここでもう一方のセレクトタグがtable1の選択内容に準じて変化 table2についてのセレクトタグを選択 Submitクリック となるとA.の処理が必要なんですね。 だとしたらまた最初に戻って＾＾； [案１] table1が選択されたタイミングをonChangeで拾って Formを実行させ 対応するtable2のセレクトタグの画面出力させる。 [案２] 最初の画面を生成する時点で javaScriptのtable2タグ変更論理を組みこんでおく。 もちろんこちらもonChangeで拾う必要があります。 補足 案１にしたとして サーバー側のPGMから見れば onChangeだろうがSubmitクリックだろうが同じです。
- gama001
- ベストアンサー率50% (3/6)
セレクトタグを選択すると即サーバーにデータをあげるような動作ではなく セレクトタグを選択してからSUBMITボタンを押すという 流れならセレクトタグにonchangeとかしこむ必要は無いです。 それと誤解があるといけないので補足させていただきますが javaScriptでという提案も サーバー側のMySQLと連携させて テーブルの内容に応じてjavaScript部分を動的に生成する。 という意味ですのでセレクトタグの選択肢が増えるたびに javaScript部分を書き直す必要は無いです。
お礼
gama001様、度々の回答をありがとうございます。 そして、レスが遅くなり申し訳ないです。 そして本題ですが、 今、作っているものが、セレクトタグを選択してからSUBMITボタンを押す流れとなります。 ということは、onchangeなどを使って処理をしなくてもいいということでしょうか？？ でも、JavaScriptは取り込むのですよね？ せっかく回答してくださったのに また質問を重ねてしまいごめんなさい＞＜；； 色々調べて頑張ってみます！
- gama001
- ベストアンサー率50% (3/6)
よくあるのは第一選択肢のSELCTタグにjavaScriptのonChangeとかをしかけておいて プルダウン選択が変わったのをきっかけにサーバーにPOSTorGETで 選択された値を送信（kindとしましょう）する方法ですね。 サーバー側スクリプトでは送られてきたkindの値をキーにSQL発行 select id,name from table2 where key=$_XXX['kind'] order by id; （きちんとPHP、SQLの文法に清書してくださいね。XXXはPOSTorGETorREQUEST） 得られた結果を元に次のSELECTタグOPTIONを生成して 画面出力する。 な感じでいかがでしょう。
お礼
回答ありがとうございます！ 現状のソースはこんな感じなのですが、 （DBから表示して、選択して「表示」ボタンを押すと他のページに表示される） <form action="write.php" method="post"> <select name="select"> <?php //DB接続 $dbcon=mysql_connect("localhost","xx","xoxo"); //DB選択 mysql_select_db("abcd"); //mainの値をセレクトフォームで表示 $res=mysql_query("select distinct * from main"); while ($rows=mysql_fetch_array($res)) { print "<option value=\"".$rows['m_id']."\">".$rows['m_item']."\n"; } //DB切断 mysql_close($dbcon); ?> </select> <input type="submit" name="submit" value="表示"> </form> gama001様のおっしゃる、SELCTタグにjavaScriptのonChangeを仕掛けるというのは、 上のソースの<select>に仕掛けることでしょうか？ すごく基本的なことなのに 理解不足でしたらごめんなさい。 でも、雰囲気的につかめたような気がします。 ありがとうございました。 ご教授よろしくお願いいたします。
- gama001
- ベストアンサー率50% (3/6)
言葉だけの問題かもしれないけど ajaxなんて大げさなものじゃなくて 簡単なjavaScriptで十分でしょう。 またブラウザを操作している人が第一番目の選択肢を 「やっぱりこっち」とか変える可能性があるなら そのたびに（ajax含め）サーバーと通信するより クライアント内で完結するjavaScriptのほうが良いと思います。 住所の入力のようにあとから変えられる可能性が低いならそのたびにPOSTなりGETなりして （データの性質によりますがGETのほうが戻る操作が簡単） サーバーからは次のプルダウンを生成した画面を出力しても良いでしょう。 ＃ただプルダウン変更のたびに待たされるのでネットワーク、サーバーともにストレス無く働いてくれないと 結構イライラしますよ。
お礼
gama001様、早速の回答をありがとうございます。 javaScriptでは処理の仕方が分かるのですが （サンプルを参考にして頑張りました） ただ、その他にも色々と組み合わせなければいけないものがあるので、mysqlを使っています。 そして、項目は決められているので 後から、セレクトフォームでの選択肢を変える可能性は低いと思われます。 試行錯誤して、頑張ってみようと思います。 ありがとうございました！
- yambejp
- ベストアンサー率51% (3827/7415)
formでsubmitしてやるか、ajaxを使うかのどちら かでしょう。 引数の値をみてsqlを発行すればよいでしょう。
お礼
yambejp様、回答ありがとうございます。 formでsubmitしてやる方法で 考えております。 また、「引数の値をみてsqlを発行する」方法は どういったことでしょうか？ POSTとかを使うのでしょうか？ 全くの初心者というのもあり、DBからセレクトフォームを表示するのも、やっとだったためもう少し具体的にご教授お願いしたいのですが・・・。 お時間がありましたら、よろしくお願いします。
お礼
gama001様、丁寧な回答をありがとうございます。 あと、私の説明不足でしたら申し訳ないのです。 補足させていただきました。 【step1：サーバー】の処理で table1のセレクトボックスを選択したあと Submitボタンを押さずに、table2のセレクトボックスを選択し、その後、一番最後にSubmitボタンを押す処理を考えております。 イメージとしては、table1とtable2のセレクトボックスから選択し終わった時点で、最終的にSubmitする形となります。 お時間がありましたら、ご教授をよろしくお願いいたします。