- 締切済み
MySQLのデータを使ってプルダウンの値を動的に変更したい
以下の授業プルダウンですが、 任意の授業が選択されたときに、 その授業の内容を大分類の下の中分類(middle_class)をDBで検索して、次の中分類プルダウンの変数に渡したいのですが、当然のごとくでき ません。 大分類で画面遷移して中分類の画面へというように、何回も検索画面 を分けるのならいいのですが。何度も処理をする必要があるので、 絶対に画面遷移しない。orしているように見えないようにしたいです。 下記サイト一番役立つかなぁと思いましたが、マスターデータはDBから検索させたい。 Javascriptsに直書きは、メンテナンスが難しい。 http://www.cc.kyoto-su.ac.jp/~ushitaki/JavaScriptExample/introselect2.html <SCRIPT LANGUAGE="JavaScript"> <!--- function getcategory(){ ckind=document.category.top.selectedIndex; cvalue=document.category.top.options[ckind].value; <?php if( $_REQUEST['$top']){ $MySQL['HOST'] = '127.0.0.1'; $MySQL['USER'] = 'root'; $MySQL['PASSWORD'] = '********'; $MySQL['DATABASE'] = 'category'; $MySQL['conn'] = @mysql_connect($MySQL['HOST'],$MySQL['USER'],$MySQL['PASSWORD']) or exit('Can not access MySQL DB'); mysql_select_db($MySQL['DATABASE'], $MySQL['conn']); $MySQL['query'] = "set names sjis"; $MySQL['result'] = mysql_query($MySQL['query'], $MySQL['conn']); $MySQL['query'] = "SELECT middle_class_code, middle_class_name FROM middle_class where top_class_code = ".$_REQUEST['$top'].""; $MySQL['result'] = mysql_query( $MySQL['query'],$MySQL['conn'] ); $count = 0; while($table4[$count] = mysql_fetch_array($MySQL['result'], MYSQL_NUM)) { $table3[$count] = $table4[$count]; $count = $count + 1; } if(cvalue==$top){ for($i = 0; $i < $count; $i++ ){ print("document.parts_category.middle.options[".$i."].text=".$table3[$i][1].";"); print("document.parts_category.middle.options[".$i."].value=".$table3[$i][0].";"); } } } ?> } //---> </SCRIPT> </HEAD> <BODY LANG="ja-JP" TEXT="#0066cc" LINK="#cc0033" VLINK="#ff9900" BGCOLOR="#ffffff" DIR="LTR"> <TABLE WIDTH=1072 BORDER=1 CELLPADDING=2 CELLSPACING=0 STYLE="page-break-before: always"> <COL WIDTH=531> <COL WIDTH=531> <TR> <TD WIDTH=531 HEIGHT=25> <P> 授業別クラス </P> </TD> <TD ROWSPAN=7 WIDTH=531> <P><BR> </P> </TD> </TR> <TR> <TD WIDTH=531 HEIGHT=20> <P>授業検索</P> </TD> </TR> <TR> <TD WIDTH=531 HEIGHT=20> <FORM NAME="category"> <P><FONT SIZE=2 STYLE="font-size: 9pt">大分類 <SELECT NAME="$top" STYLE="width: 2.43cm; height: 0.56cm" onChange="this.form.submit()"> <OPTION VALUE="x">大分類 <OPTION VALUE="MATH">数学 <OPTION VALUE="JAPE">国語 <OPTION VALUE="JAPH">日本史 <OPTION VALUE="CHEM">化学 <OPTION VALUE="PHYS">物理 <OPTION VALUE="FORL">外国語 <OPTION VALUE="WORH">世界史 </OPTION> </SELECT></FONT></P> </TD> </TR> <TR> <TD WIDTH=531> <P><FONT SIZE=2 STYLE="font-size: 9pt">中分類 <SELECT NAME="middle" STYLE="width: 4.52cm; height: 0.56cm" ONCHANGE="getparts()"> <OPTION VALUE="x" SELECTED>まず大分類を選んでください <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"> <OPTION VALUE="x"></OPTION> </SELECT></FONT></P> </TD> </TR> <TR> <TD WIDTH=531> <P><INPUT TYPE=SUBMIT VALUE="検索" STYLE="width: 1.08cm; height: 0.58cm"></FORM> </P> </TD> </TR> </TABLE>
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- moon_night
- ベストアンサー率32% (598/1831)
- yambejp
- ベストアンサー率51% (3827/7415)
>本題と離れてしましますが、ajaxで実現できるのであれば、 >このあたり参考になる本があれば、教えていただけませんか？ うーん、私はajaxについてはネット上でサンプルを拾ったことしか ないので書籍については一切持ってません。 「ajax 書籍」などでぐぐってみるとそれなりにでてくるかもしれませんが そうするくらないならajaxで検索してソースをいろいろ拾い集めたほうが てっとりばやいかも。 >ちなみにajaxとPHPって連携できるのでしょうか？ ajaxは単なるjavascriptですからajaxからセレクトボックスを 呼び出すことは問題なくできます。 セレクトボックス自体をPHPでかけばまさにajaxとPHPの連携ですね。 >ただ最後に２行があまり理解できませんでした >>onChangeではなくsubmitで正規に検索するのであればjavascriptを >>使わずにすむのでブラウザに依存しないシステム運用も可能です。 書き方がわるくてすみません。 毎回サブミットボタンをおして検索するシステムなら、ブラウザが 変わっても、たとえば携帯からアクセスしても、つかえるます・・・ ってことがいいたかっただけです。（そのあたりはご理解なさっている とは思いますが・・・）
- yambejp
- ベストアンサー率51% (3827/7415)
大分類を選ぶたびに、画面遷移なしでDBを読みにいくのであれば ajaxをつかってください。 もしくは大分類を選ぶたびにonChangeでformをサブミットして、 中分類をよみにいくというフローもできます。 onChangeではなくsubmitで正規に検索するのであればjavascriptを 使わずにすむのでブラウザに依存しないシステム運用も可能です。
補足
onChangeでフォームを飛ばしたいことも要求として あります。 毎回毎回、<INPUT TYPE=SUBMIT VALUE="検索" STYLE="width: 1.08cm; height: 0.58cm"> を押してから、フォームを渡すのは、面倒だから。 ajaxって使ったことないんですけど。 これが実現できるのであればajaxに挑戦する価値は大です。 本題と離れてしましますが、ajaxで実現できるのであれば、 このあたり参考になる本があれば、教えていただけませんか？ ちなみにajaxとPHPって連携できるのでしょうか？ ただ最後に２行があまり理解できませんでした。 未熟なので申し訳ないところです。
補足
ajaxの書籍を買って、少し斜め読みしてみました。 手順としては、 1.○○.html(ajaxlib:jslb_ajax.js含む ) <SELECT *** onChange="sendRequest(on_loaded1,'$category','GET','./middle_class.php',true,true)"> で△△.phpに投げる。 2.△△.phpで mysql_fetch_arrayで$table3の2次元配列に入れる。 $table3[0][0] = 1 $table3[0][1] = 歴史 $table3[1][0] = 2 $table3[1][1] = 数学 な感じに。 for($i = 0; $i < $count; $i++){ $kyouka = $kyouka." ".$table3[$i][0]." ".$table3[$i][1]; } //出力をUTF-8に変更 mb_http_output('utf-8'); //出力 echo ( $kyouka ); ３．△△.phpでbashされた$table3をon_loaded1(oj)で捕まえる。 function on_loaded1(oj){ <!---レスポンスを取得 ---> var res = oj.responseText <---ここで受け取れてないかも。 alart(res) <---何も表示されない。 <!---レスポンスを\nで分解して行データの配列を作る---> var row = res.split(' ') alart(row[0]) oj.responseTextでデータが取得できていません。 △△.php自体の動作はO.K.だけど、○○.htmlのjavascriptが うまく動作しているのか？です。