二つのselectboxを連動させる
すっかり週一更新ですが、備忘録なんてそんなもんです（開きなおり）。
さ、イントラの作業をメモメモ。
selectboxの連動（左のselectboxを変更すると右のselectboxの内容が変更される）は大きく2つのタイプがある。
- 選択するごとにsubmitして変更するもの。
- javascriptにてクライアント側で動的に切り替えるもの。
今回はリストの内容はDBから取得するので、1が楽チンなのですがいちいちsubmitされるのもちと面倒…。
よって、phpでDBから項目を読み込んで、javascriptへ書き込んでしまい、クライアント側で動的に変更という手段を選択。
ソースはいくらでもあると思ったんですが、私の条件そのものは見つからず、幾つかのサイトを参考に作成。
ベースになるのはこちらのソース（「javascript」から「フォーム」-「選択リスト間の連動」です。）
これにDBからデータを取得してjavascriptへ書き出すスクリプトを追加。
参考にしたのはPHP-UsersML このスレッドのこの投稿
できあがったソースがこちら。（問題があれば削除します）
目的：所属部署を選択すると、メンバーを選択できるように。
DB構成：
CREATE TABLE SECTION_T(
PRIMARY KEY(SECID),
SECID SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT,
SECFOLDER VARCHAR(15),
SECTION VARCHAR(40)
);
CREATE TABLE PERSON_T(
PRIMARY KEY(PERSONID),
PERSONID SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT,
NAME VARCHAR(20),
SECID TINYINT UNSIGNED
);
<html> <script language="JavaScript"> <!-- page = new Array(); page_text = new Array(); page_length = new Array(); <? //データベース接続 if(!$con=mysql_connect("hoge","hage","boke")){ echo"<h1>データーベース接続失敗</h1>"; exit; } //データベース選択 if(!mysql_select_db("moge",$con)){ echo"<h1>DB選択失敗</h1>"; exit; } $sql = "select SECID,SECTION from intranet.section_t order by SECID"; $result_a = mysql_query($sql);//SQL実行 while($data_a = mysql_fetch_array($result_a)){ print("page[".$data_a[SECID]."] = new Array("); $sql_query = "SELECT PERSONID,NAME FROM person_t WHERE SECID=".$data_a[SECID]; $result_b = mysql_query($sql_query); $i = 0; while($data_b = mysql_fetch_array($result_b)){ $result_count = mysql_num_rows($result_b);//件数カウント print("\"".$data_b[PERSONID]."\""); if ($i < $result_count -1) { print(","); }else{ print(");\n"); print("page_length[".$data_a[SECID]."] = ".mysql_num_rows($result_b).";\n"); } $i++; } print("page_text[".$data_a[SECID]."] = new Array("); $sql_query = "SELECT PERSONID,NAME FROM person_t WHERE SECID=".$data_a[SECID]; $result_b = mysql_query($sql_query); $i = 0; while($data_b = mysql_fetch_array($result_b)){ $result_count = mysql_num_rows($result_b);//件数カウント print("\"".$data_b[NAME]."\""); if ($i < $result_count -1) { print(","); }else{ print(");\n"); } $i++; } } ?> function UrlList(idx){ for(i=0;i<page_length[idx];i++){ document.form1.selform2.length=page_length[idx]; document.form1.selform2.options[i].text = page_text[idx][i]; document.form1.selform2.options[i].value= page[idx][i]; //選択ﾘｽﾄに項目を追加 } } //--> </script> </head> <body> <FORM method="post" name="form1"> <SELECT name="selform1" onChange="UrlList(this.options[selectedIndex].value);"> <OPTION>選択してください。</OPTION> <? $sql = "select SECID,SECTION from section_t order by SECID"; $rs = mysql_query($sql); while($row=mysql_fetch_array($rs)){ print("<OPTION value=". $row["SECID"] . ">". $row["SECTION"] . "</OPTION>\n"); } ?> </select> <select name="selform2"> </select> </td></tr></table></form> </body>
プログラム本職じゃないんで、きちゃないソースなのは簡便…。
(右クリックからショートカットのコピーを選択)