AJAXでPHPの配列を用いたセレクトボックスの連動

質問

AJAXでPHPの配列を用いたセレクトボックスの連動を行いたいと思っています。たとえば、
PHPで配列をセットしセレクトボックスを生成します。
1番目のセレクトボックスで1番目の項目を選択すると
2番目のセレクトボックスの内容が連動して変化する。
といった動きを目指しています。
2番目のセレクトボックスの内容もPHPで持って設定したいと考えています。
1番目のセレクトボックスのvalue値が2ならばajaxで通信して21から29までのkeyの配列を設定するという形式ですが。どのようにして良いかわかりません。
教えて下さい。

回答No.2

yyr446 · ベストアンサー

確かに、phpで配列データをシリアライズする部分は、json形式
で作成してしまうのが、簡単でそのままjavascriptで使えるので
便利だと思います。
php5.2以降だとjson_encode()という関数もあります。
例えば、
<?php
$data = array ("a" => "x", "b" => "y", "c" => "z");
print_r(json_encode($data));
?>
とすると、
{"a":"x","b":"y","c":"z"}
が出力されるので、javascript側は
var data = ～.responseText;
で受け取って、
alert(data.a); ＝＞ x
とか
alert(data["b"]); ＝＞ y
で参照可能なはずです。

補足

function SelValue(){
var x = $('#category1').val();
var url = "category.php";
$.ajax({
type:"post",
url: "category.php",
data :{"params":x},
success:function(){
$.getJSON("category.php", function(json){
alert("JSON Data: " + json.ary[1].value);
});
}
});
}

以下category.php
if(!$_POST)
header("Location: input.php");
$CATEGORY2 = array(
1 =>array(
1 => "a",
2 => "b",
3 => "c",
),
2 => array(
1 => "d",
2 => "e",
3 => "f",
),
3 => array(
1 => "g",
2 => "h",
3 => "i",
),
);
$ary = array();
if($_POST["params"]){
for($i=1;$i<=3;$i++){
foreach($CATEGORY2[$i] as $key => $value){
if($key == $_POST["params"])
$ary = $CATEGORY2[$i];
}
}
}
$ary = json_encode($ary);
としています。
PHPにPOSTしたデータも確認できないし
jsonデータを表示できないです。
どのようにしたらいいかわかりません。
ajax初心者でわからないことだらけです。
教えてください。

回答No.1

yyr446

ajaxを使うならjavascriptと連動して作成するという事ですね。
1．1番目のセレクトボックスのオプションは予めhtmlで記述しておきます。
2．javascriptで1番目のセレクトボックスのonchangeのイベントを拾い、
選択されたキー値をajaxでphpにPOST要求します。
3．phpプログラムは送信されたキー値に該当する配列データを、シリアライ
ズしてテキストデータとして出力します。
4．ajax送信側のjavascriptはレスポンスをテキストデータとして受信出来
たらアンシリアライズしてjavascriptの配列に格納します。
5．2番目のセレクトボックスの子オプション要素を全部DOM関数で削除します。
6．格納した配列の値をもとに、javascriptのDOM関数でオプション要素を
作成し、2番目のセレクトボックスに追加します。これを配列の数だけ
繰り返します。

補足

2の部分ですが、これはprototypeとかjqueryのライブラリを使用するのでしょうか？
3の部分ですが、JSONの形式でPHPで作成してということでしょうか？
いろいろ調べているのですが、苦しんでます。
よろしくお願いします。