二つの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>
プログラム本職じゃないんで、きちゃないソースなのは簡便…。
(右クリックからショートカットのコピーを選択)