jQuery、AJAX、PHP、MySQL を使用して動的依存ドロップダウンを作成する方法

jQuery/AJAX および PHP/MySQL を使用した動的ドロップダウン

問題:

jQuery/AJAX および PHP/MySQL を使用した動的なドロップダウン ボックスのセットここで、2 番目のドロップダウンのオプションは、最初のドロップダウンでの選択内容によって異なります。

JSON クエリ:

2 番目のドロップダウンの値を生成するために提供された JSON クエリは、正しく機能します。ただし、ドロップダウン フォーム要素にオプションを設定する際に問題があります。

JavaScript:

主なエラーは、最初のドロップダウンのイベント ハンドラー内にあります。変更されたコードは次のようになります。

$().ready(function () {
    $("#item_1").change(function () {
        var group_id = $(this).val();

        $.ajax({
            type: "POST",
            url: "../../db/groups.php?item_1_id=" + group_id,
            dataType: "json",
            success: function (data) {
                // Clear previous options
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Select Option</option>');

                // Populate options from JSON
                $.each(data.subjects, function (i, val) {
                    $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
                });

                $('select#item_2').focus();
            },
            beforeSend: function () {
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Loading...</option>');
            },
            error: function () {
                $('select#item_2').attr('disabled', true);
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">No Options</option>');
            }
        });
    });
});

HTML:

提供された HTML コードは正しいようです。

PHP:

JSON データを取得するための PHP コードも正しいです。

サンプル JSON 出力:

提供されたサンプル JSON 出力は有効であり、jQuery コードによって正しく解析されます。

以上がjQuery、AJAX、PHP、MySQL を使用して動的依存ドロップダウンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。