AJAXでPHPの配列を用いたセレクトボックスの連動を行いたいと思っています。たとえば、
PHPで配列をセットしセレクトボックスを生成します。
1番目のセレクトボックスで1番目の項目を選択すると
2番目のセレクトボックスの内容が連動して変化する。
といった動きを目指しています。
2番目のセレクトボックスの内容もPHPで持って設定したいと考えています。
1番目のセレクトボックスのvalue値が2ならばajaxで通信して21から29までのkeyの配列を設定するという形式ですが。どのようにして良いかわかりません。
教えて下さい。
No.2ベストアンサー
- 回答日時:
確かに、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
- 回答日時:
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で作成してということでしょうか?
いろいろ調べているのですが、苦しんでます。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
- Excel(エクセル) [クイックアクセスツールバー]の設定ファイルの格納場所について、 5 2023/04/21 14:43
- 郵便・宅配 マンションなどの宅配ボックスの利用方法について 4 2023/03/17 21:47
- Visual Basic(VBA) いつもお世話になっております、VBAで教えて頂きたいのですが 2 2022/05/05 22:20
- 分譲マンション 宅配ボックスの中の香水が劣化するか 3 2022/06/21 18:12
- その他(悩み相談・人生相談) 教えて下さい ジェイコムのセレクト番組で、女性の裸を見れる番組を教えて下さい ナンチャンネルですか 1 2023/07/08 11:03
- 郵便・宅配 宅配ボックス(集合住宅)の使い方について 1 2022/11/23 16:47
- 郵便・宅配 Amazonで誤配されたかもしれません 先日Amazonで買い物をしました。宅配ボックスに入れるよう 3 2023/04/23 19:03
- 郵便・宅配 マンションの宅配ボックスに謎の荷物…… 1 2022/12/11 21:15
- 郵便・宅配 マンションの宅配ボックスの場所について Amazonで注文した品物を手渡しで受け取る際にAmazon 4 2022/06/14 09:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryを使いformでsubmitした...
-
jQuery を外部ファイルから呼び...
-
Ajaxを使った検索サイト作成
-
JavascriptからPHPへのAjax通信...
-
jqueryのloadを使って検索結果...
-
JavaScriptでtabindexの変更っ...
-
Selenium Basicの件
-
Javascriptを使ってQRコード読...
-
[jQuery UI] sortableを使いaja...
-
カンマ区切りのデータを配列に...
-
ajaxでPOSTする変数の変数名を...
-
PHPで動的に生成されるcsvの、...
-
SQLのmaxで求めた値を変数に代...
-
一定時間ごとに表示内容を切り...
-
jQueryで、複数条件の絞り込み機能
-
Ajax.Requestで取得したHTMLソ...
-
IndexedDB を使ってファイルア...
-
階層別の組織図の自動作成について
-
bxsliderで画像毎に表示時間を...
-
ドラッグ & ドロップでのド...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
jQueryを使いformでsubmitした...
-
AjaxでJSONを受信すると、文字...
-
jQueryのblockUIをformのボタン...
-
ajaxからphpにpsotしたときの日...
-
jQuery3 reset()が効かない。
-
ajax + PHPによるエラーの返し...
-
jQuery,Ajaxでcgiに接続する方...
-
Ajax・jQueryでGETとPOSTする方法
-
AJAXでPHPの配列を用いたセレク...
-
ajaxでPHPにPOST送信して結果デ...
-
JSONをperlで受け取る方法
-
JQueryの変数の扱いで弱ってい...
-
jquery.cookie.jsの使い方が分...
-
Ajax サーバーに負荷かかります...
-
Perl JavaScript Ajax リアルタ...
-
jQuery を外部ファイルから呼び...
-
jqueryのloadを使って検索結果...
-
Ajax・jQueryでGET時にIE...
-
jQueryで外部テキストファイル...
おすすめ情報