AJAX+PHPでセレクトボックスの連動

質問

AJAX+PHPでセレクトボックスの連動をしようとしています。
function SelAjax(){
var x = $('#category1').val();
$.ajax({
type: "POST",
url: "category.php",
data: {"prm":x},
dataType: "json",
success: function(data, status){
$.each(data,function(i) { $('#category2').append($('<option>').attr({ value: i }).text(data[i]));
});
},
error: function(XMLHttpRequest, status, errorThrown){
alert("エラーが発生しました！");
}
});
}
としています。
PHP側で
$CATEGORY2 = array(
1 => array(
1 => "a",
2 => "b",
3 => "c",
4 => "d",
),
2 => array(
1 => "e",
2 => "f",
3 => "g",
4 => "h",
),
3 => array(
1 => "i",
2 => "j",
3 => "k",
4 => "l",
),
4 => array(
1 => "m",
2 => "n",
3 => "o",
4 => "p",
),
5 => array(
1 => "q",
2 => "r",
),
6 => array(
1 => "s",
2 => "t",
3 => "u",
),
);
$ary = array();
if($_POST["prm"]){
for($i=1;$i<=6;$i++){
if($i ==$_POST["prm"] )
$ary = $CATEGORY2[$i];
}
}
echo json_encode($ary);
としています。
一回目に1番目のセレクトボックスを選択してAjaxでPOSTし2つ目のセレクトボックスを生成できました。
しかし、2回目として1番目のセレクトボックスを選択した際に、1回目にPHPから受け取った配列に積みあがってしまいます。
どのように対処すればいいかわかりません。
教えてください。

回答No.2

yyr446 · ベストアンサー

No.1です。おっと、複数<option>があるのでリプレースはだめですね。
やはり全部削除してから追加ですね。
success: function(data, status){
$("#category2").empty();
$.each(data,function(i) { $('#category2').append($('<option>').attr({ value: i }).text(data[i]));
});
},

お礼

おお・・・
すばらしい！！
emptyっていうのがあったんですね。
感激しました。
javascriptで普通にonchangeでできないこともないのですが、敢えてajaxに挑戦してみました。
ありがとうございました。
あやうくノイローゼになりそうでした。(笑)

回答No.1

yyr446

セレクトボックスのhtml部分が、掲載されてないので、
中途半端な解答ですが、
appendする前に、前にappendした<option>を削除していないから
積みあがっていくのだと思います。
jQueryだとリプレースのメソッドもあるので、
$.each(data,function(i) {
$('#category2 > option').replaceWith($('<option>').attr({ value: i }).text(data[i])
});

でどうでしょうか。