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ベストアンサー
- 回答日時:
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
- 回答日時:
セレクトボックスのhtml部分が、掲載されてないので、
中途半端な解答ですが、
appendする前に、前にappendした<option>を削除していないから
積みあがっていくのだと思います。
jQueryだとリプレースのメソッドもあるので、
$.each(data,function(i) {
$('#category2 > option').replaceWith($('<option>').attr({ value: i }).text(data[i])
});
でどうでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- PHP PHPでユーザー情報を入力して簡易ログイン機能をつくってみたのですが 1 2023/05/29 08:51
- C言語・C++・C# c言語の問題です 課題1 (二分探索木とセット) 大きさ size の配列 array を考える。す 2 2023/01/10 21:08
- PHP php ログイン 1 2022/11/01 00:24
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- Visual Basic(VBA) 別シートから年齢別の件数をカウントしたいの続き 5 2023/01/24 00:16
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryのblockUIをformのボタン...
-
JavascriptからPHPへのAjax通信...
-
Ajax・jQueryでGET時にIE...
-
ajax + PHPによるエラーの返し...
-
jQuery,Ajaxでcgiに接続する方...
-
AjaxでJSONを受信すると、文字...
-
Ajaxでフォームデータを連続登...
-
jQueryを使いformでsubmitした...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
Python: TypeError
-
リンク付きの画像をクリックす...
-
readyStateが4にならない原因
-
同一ページ移動時ハンバーガー...
-
ページ内リンクで#などのアンカ...
-
JQuery Datepickerについて
-
jqueryのgetでJSPを呼び出したい
-
たくさんの経由地がある巡回ル...
-
階層別の組織図の自動作成について
-
座標のみでクリックする方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
jQueryを使いformでsubmitした...
-
AjaxでJSONを受信すると、文字...
-
jQuery を外部ファイルから呼び...
-
jQueryのblockUIをformのボタン...
-
Ajaxでフォームデータを連続登...
-
jquery × php × mysql 非同期で...
-
jquery,ajaxによるphp通信でnull
-
jQuery3 reset()が効かない。
-
Ajax サーバーに負荷かかります...
-
ajaxでPHPにPOST送信して結果デ...
-
Ajaxを使った検索サイト作成
-
jQueryで外部テキストファイル...
-
Ajax・jQueryでGETとPOSTする方法
-
jqueryのloadを使って検索結果...
-
ajax + PHPによるエラーの返し...
-
ajaxからphpにpsotしたときの日...
-
入力した文字をDBと照合させて...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
おすすめ情報