javascriptへのphp変数受け渡し（コンボボックスの作成）

質問

こんにちは。
いつも皆さんの回答を参考にさせていただいております。

現在、phpで開発を行っているのですが、javascriptでの処理について行き詰ってしまったのでご質問させていただきたいと思います。
過去の質問や他のサイトでも同じような内容があり申し訳ないのですが、
理解ができませんでしたのでアドバイスを頂きたいです。

【やりたいこと】
・phpファイル内で、javascriptによる二つの連動したコンボボックスの作成。
・コンボボックスの内容をDBから取得し、動的にコンボボックスの内容を変更させる。
【現在】
・DBからデータを取得し、javascriptでループをまわしたい変数を作成するところまでできました。
・phpで作成した値をjavascriptでループさせるところで止まっています。

コードは以下の通りです。サンプルとして取得してきたjavascriptもそのまま記載しています。
***************************************************
<?
　　　　//DBからデータを取得
$strSql = $dbSqlObj2->selectGyomuAllSortedGyomu();
$result_gyomu = $dbExecObj2->exeSql($conn, $strSql);
$count_gyomu = $dbExecObj2->getNumRows($result_gyomu);

//第一ループの値作成する
for($i=0; $i<$count_gyomu; $i++){
${"gyomu_group{$i}"} = "(".null.",\"".$dbExecObj2->getResult($result_gyomu, $i, "gyomu_name")."\",\"".$dbExecObj2->getResult($result_gyomu, $i, "gyomu_cd")."\")";
}
//第二ループの値を作成する
　　　　【まだ作れていません】
?>

<script type="text/javascript" src="Select.js" charset="Shift_JIS"></script>【jsファイルを取り込んでいます】
<script language="JavaScript">
<!--
var count=<? echo $count_gyomu ?>;//DBデータのカウントを代入

var box1 = new SelectBox("sb1");
box1.registOption(new SelectOption(null, "都道府県", "0", "color:gray;"));
************【こんな感じでループをしたい】*******
for(i=0;i<count; i++){
gyomu_group.i = "<? echo $gyomu_group.i; ?>";
box1.registOption(new SelectOption(gyomu_group.i));
}
*********************************************
box1.registOption(new SelectOption(null, "大阪" , "1"));
box1.registOption(new SelectOption(null, "京都", "2"));

var box2 = new SelectBox("sb2");
box2.registOption(new SelectOption(null, "地区", "0", "color:gray;"));
box2.registOption(new SelectOption("1" , "北区", "1"));
box2.registOption(new SelectOption("1" , "中央区" , "2"));
box2.registOption(new SelectOption("2" , "上京区" , "3"));
box2.registOption(new SelectOption("2" , "下京区" , "4"));

box1.setChild(box2);

window.onload = function() {
box1.make(null);
};

-->
</script>

<?
<table>
<tr><td width="100" valign="top"> <span class="fBlack10100">都道府県：</span></td>
<td><select id="sb1" name="dodofuken_cd" onchange="box2.make(this.value);"></select>
</td></tr>
<tr><td width="100" valign="top"> <span class="fBlack10100">地区：</span></td>
<td><select id="sb2" name="chiku_cd"></select>

</td></tr>
</table>
?>
***************************************************

分かりつらく、初歩的な質問で申し訳ありません。
是非お力をお貸しください。
宜しくお願いします。

回答No.2

tany180sx

DB、Select.jsの中身が分からないので的確なアドバイスできませんが、
試しに素で書いてみました。参考になるかは不明。

<?php
// DBからデータを取得 // dummy
$list1 = array(
　array('id' => 1, 'name' => 'alpha'),
　array('id' => 2, 'name' => 'num'),
　array('id' => 3, 'name' => 'kana'),
);
$list2 = array(
　array('id' => 1, 'pid' => 1, 'name' => 'A'),
　array('id' => 2, 'pid' => 1, 'name' => 'B'),
　array('id' => 3, 'pid' => 2, 'name' => '1'),
　array('id' => 4, 'pid' => 2, 'name' => '2'),
　array('id' => 5, 'pid' => 3, 'name' => 'ア'),
　array('id' => 6, 'pid' => 3, 'name' => 'イ'),
);

$sb1_options = '';
foreach ($list1 as $data) {
　$sb1_options .= '<option value="' . $data['id'] . '">' . $data['name'] . '</option>';
}

?>
<script type="text/javascript">

<?php
echo 'var list2 = new Array();' . "\n";
foreach ($list1 as $data) {
　echo 'list2[' . $data['id'] . '] = new Array();' . "\n";
}
foreach ($list2 as $data) {
　echo 'list2[' . $data['pid'] . '][' . $data['id'] . '] = "'
　　. $data['name'] . '";' . "\n";
}
?>

function onchangeSelect1(value) {
　select = document.getElementById('sb2');
　select.options.length = 0;
　for (key in list2[value]) {
　　len = select.options.length;
　　select.options[select.options.length] = new Option(list2[value][key], key);
　}
}

</script>

Type: <select id="sb1" onchange="onchangeSelect1(this.value);">
　<?php echo $sb1_options ?></select>
Value: <select id="sb2">
　<option value="">--Typeを選択してくだしあ--</option></select>

回答No.1

noname#94983

ちょっと考え方に無理があるような気がするんだが。

このページの、PHPのスクリプトが動いているのは、サーバの中でだ。その段階では、ページはまだブラウザには送られていない（当然、JavaScriptも動いてない）。そして、サーバの処理が終わり（つまりPHPのスクリプトもすべて終わり）サーバからブラウザへ送信されると、ブラウザにページが読み込まれ、ここで初めてJavaScriptのスクリプトが動く。（このときは、PHPの処理は既に完全に終わった後で、PHPのスクリプトは動かない）

したがって、どうやったって、同じページにあるPHPからJavaScriptへリアルタイムに値を渡すことはできない。

ではどうやるかというと、１つは、PHPの中で、JavaScriptのスクリプトを動的に生成してクライアントへ出力してやる、ということ。たとえば、

<script type="text/javascript">
<?= "var php_val = " . $php_val ?>
</script>

みたいにしてPHPでJavaScriptの<script>タグ内に変数定義の文を動的に書き出し、その変数を使ってJavaScriptが動くような形にしてやる。ただし、これはブラウザに表示された段階では、あくまで静的な表示になる。

もう１つは、１つのページで処理するのをやめ、表示ページと、データベースにアクセスし結果を出力するPHPページを分け、JavaScriptのスクリプトからAjaxを使ってPHPページにアクセスし結果を受け取って処理する、ということ。

一般的には、このどちらかの方法になるんでないか。もし、ブラウザに表示されたページで何かの操作をし、そこでリアルタイムに表示を変えたいというのであれば、Ajax利用の形にするしかないだろうな。

お礼

ご回答本当にありがとうございます！
まさか頂けるとは思わず質問してみたので、非常にうれしいです。

>>このページの、PHPのスクリプトが動いているのは、サーバの中でだ。

この点に関しましては、自分でも理解しているつもりです。
ソースの
var count=<? echo $count_gyomu ?>;//DBデータのカウントを代入
この部分の値は正常に取得できているので、同じように****…のjsループ内でもソース上部のphpで代入しておいた変数（${"gyomu_group{$i}"} ）を取得したいと思うのですが…