プロが教えるわが家の防犯対策術！

mysqlからのコンボボックスについて教えてください

解決済

  • 質問者：bacon_001
  • 質問日時：
  • 回答数：8件

はじめまして。

mysql+php初心者の者ですが、
ご教授をよろしくお願いいたします。


[table 1]

id　 種類
----------
1 野菜
2　 果物
3　 麺


[table 2]

id　 　key 　　名前
----------------------
1 　1 にんじん
2　 　1 たまねぎ
3　　　1　　 ほうれん草
4 　2 りんご
5　　　2　　 バナナ
6 　3 うどん
7　　　3　　 ラーメン



[table 1]のid　と、[table 2]のkeyが
対応するように、連動したコンボボックスを作りたいと思って頑張っています。



コンボボックス1には、[table 1]の、種類が入り
コンボボックス2には、[table 1]の種類に連動して、[table 2]の名前が選択できるように
したいと思っています。

たとえば、コンボボックス1で「果物」を選択した場合、
コンボボックス2では、「りんご」「バナナ」がコンボボックスに
表示されて選べるようになるようにするです。


単純に、mysqlからセレクトフォームに表示することはできましたが、
連動がどうやればいいのか、色々調べましたが
力不足で分かりませんでした。

コンボボックスを連動させるために、[table2]に「key」のフィールドを加えたので、
改良しようと思っております。

ご教授をよろしくお願いいたします。


環境
-------

WindowsXP
mysql4.0
php4.2
Apache1.3

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.5ベストアンサー

  • 回答者： gama001
  • 回答日時：

【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とか）については
適切な妥当検査処理を施すことを忘れずに。
    • good
    • 0
    • 件
通報する
この回答へのお礼

gama001様、丁寧な回答をありがとうございます。

あと、私の説明不足でしたら申し訳ないのです。
補足させていただきました。

【step1：サーバー】の処理で

table1のセレクトボックスを選択したあと
Submitボタンを押さずに、table2のセレクトボックスを選択し、その後、一番最後にSubmitボタンを押す処理を考えております。

イメージとしては、table1とtable2のセレクトボックスから選択し終わった時点で、最終的にSubmitする形となります。

お時間がありましたら、ご教授をよろしくお願いいたします。

通報する
お礼日時：2006/03/01 13:47

No.8

  • 回答者： gama001
  • 回答日時：

かえって混乱させてしまったようで申し訳在りませんでした。


SELECTのonChangeについては
ここに質問と回答があります。

参考URL：http://oshiete1.goo.ne.jp/kotaeru.php3?q=1999079
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： gama001
  • 回答日時：

さらに補足２として


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の話じゃないですね＾＾；）
    • good
    • 0
    • 件
通報する
この回答へのお礼

gama001様、ご教授ありがとうございます。
JavaScriptでの連動は出来ました＾＾
ありがとうございます。

しかし、色々と試行錯誤してみたところ
現状では、一番最初のページであります「index.php」を開くと同時に、mysqlに登録してあるセレクトボックス用のtable1とtable2が選択できるように、連動はしていませんが、むき出しに表示されています。

上記のような現状からの改良が混乱してしまったので、また最初に戻して、考え始めました。
というのも、クライアント側のみだけで処理せず、
そんなにサーバに負担がかからない程度のDBに収まりそうなので、table1のセレクトフォームで選択した後、一度、DBへ問い合わせ、そして、table2のセレクトフォームで、table1に対応する種類を表示しようと思います。

なので、gama001様が、以前お答えしてくれたやり方に近い状態で再挑戦してみようと思っています。

お手数をおかけしてしまい申し訳なかったです。
ありがとうございました。頑張ってみます。

通報する
お礼日時：2006/03/01 22:41

No.6

  • 回答者： gama001
  • 回答日時：

あれれれれ？


となるとこうですか
【step1-1：クライアント】
table1についてのセレクトタグを選択
＊A.ここでもう一方のセレクトタグがtable1の選択内容に準じて変化
table2についてのセレクトタグを選択
Submitクリック

となるとA.の処理が必要なんですね。
だとしたらまた最初に戻って＾＾；
[案１]
table1が選択されたタイミングをonChangeで拾って
Formを実行させ
対応するtable2のセレクトタグの画面出力させる。
[案２]
最初の画面を生成する時点で
javaScriptのtable2タグ変更論理を組みこんでおく。
もちろんこちらもonChangeで拾う必要があります。

補足
案１にしたとして
サーバー側のPGMから見れば
onChangeだろうがSubmitクリックだろうが同じです。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： gama001
  • 回答日時：

セレクトタグを選択すると即サーバーにデータをあげるような動作ではなく


セレクトタグを選択してからSUBMITボタンを押すという
流れならセレクトタグにonchangeとかしこむ必要は無いです。

それと誤解があるといけないので補足させていただきますが
javaScriptでという提案も
サーバー側のMySQLと連携させて
テーブルの内容に応じてjavaScript部分を動的に生成する。
という意味ですのでセレクトタグの選択肢が増えるたびに
javaScript部分を書き直す必要は無いです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

gama001様、度々の回答をありがとうございます。
そして、レスが遅くなり申し訳ないです。

そして本題ですが、
今、作っているものが、セレクトタグを選択してからSUBMITボタンを押す流れとなります。
ということは、onchangeなどを使って処理をしなくてもいいということでしょうか？？
でも、JavaScriptは取り込むのですよね？

せっかく回答してくださったのに
また質問を重ねてしまいごめんなさい＞＜；；

色々調べて頑張ってみます！

通報する
お礼日時：2006/03/01 09:41

No.3

  • 回答者： gama001
  • 回答日時：

よくあるのは第一選択肢の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を生成して
画面出力する。

な感じでいかがでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます！

現状のソースはこんな感じなのですが、
（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>に仕掛けることでしょうか？

すごく基本的なことなのに
理解不足でしたらごめんなさい。
でも、雰囲気的につかめたような気がします。
ありがとうございました。

ご教授よろしくお願いいたします。

通報する
お礼日時：2006/02/28 19:07

No.2

  • 回答者： gama001
  • 回答日時：

言葉だけの問題かもしれないけど


ajaxなんて大げさなものじゃなくて
簡単なjavaScriptで十分でしょう。

またブラウザを操作している人が第一番目の選択肢を
「やっぱりこっち」とか変える可能性があるなら
そのたびに（ajax含め）サーバーと通信するより
クライアント内で完結するjavaScriptのほうが良いと思います。

住所の入力のようにあとから変えられる可能性が低いならそのたびにPOSTなりGETなりして
（データの性質によりますがGETのほうが戻る操作が簡単）
サーバーからは次のプルダウンを生成した画面を出力しても良いでしょう。


＃ただプルダウン変更のたびに待たされるのでネットワーク、サーバーともにストレス無く働いてくれないと
結構イライラしますよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

gama001様、早速の回答をありがとうございます。

javaScriptでは処理の仕方が分かるのですが
（サンプルを参考にして頑張りました）
ただ、その他にも色々と組み合わせなければいけないものがあるので、mysqlを使っています。

そして、項目は決められているので
後から、セレクトフォームでの選択肢を変える可能性は低いと思われます。

試行錯誤して、頑張ってみようと思います。
ありがとうございました！

通報する
お礼日時：2006/02/28 18:54

No.1

  • 回答者： yambejp
  • 回答日時：

formでsubmitしてやるか、ajaxを使うかのどちら


かでしょう。
引数の値をみてsqlを発行すればよいでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejp様、回答ありがとうございます。

formでsubmitしてやる方法で
考えております。

また、「引数の値をみてsqlを発行する」方法は
どういったことでしょうか？

POSTとかを使うのでしょうか？


全くの初心者というのもあり、DBからセレクトフォームを表示するのも、やっとだったためもう少し具体的にご教授お願いしたいのですが・・・。
お時間がありましたら、よろしくお願いします。

通報する
お礼日時：2006/02/27 22:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報