AJAX と PHP を使用して依存ドロップダウンボックスにデータを入力するにはどうすればよいですか?-PHPチュートリアル-php.cn

AJAX と PHP を使用して依存ドロップダウンボックスにデータを入力するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-12 14:46:15

オリジナル

385 人が閲覧しました

How to Populate a Dependent Dropdown Box Using AJAX and PHP?

別のドロップダウンボックスの選択に基づいて動的ドロップダウンボックスに値を入力するにはどうすればよいですか?

以下に示すように category というデータベーステーブルがあります。

[列「id」、「name」、「master」を持つ「category」という名前のデータベーステーブルの画像]

I動的ドロップダウンボックスを実行しようとしていますが、インデックススクリプトは次のように表示されます:

[インデックススクリプトのコードサンプル]

update.php は次のように表示されます:

[update.php のコードサンプル]

2 番目のドロップダウンボックスには、1 番目のドロップダウンボックスに依存する値が表示されません。表示:

[2 つのドロップダウンボックスを含むフォームのイメージ。最初のドロップダウンボックスには、[1 つ選択]、[カテゴリ 1]、および [カテゴリ 2] のオプションがあります。 2 番目のドロップダウンボックスにはオプション「----」のみがあります。]

誰か助けてください。

答え:

2 番目のボックスのオプションが最初のボックスの選択に依存する動的なドロップダウンボックスを作成するには、次を使用できます。アプローチ:

最初のドロップダウンボックスの変更イベントを処理する: jQuery を使用して、最初のドロップダウンボックスに変更イベントリスナーを追加します。最初のドロップダウンボックスの値が変更されると、このイベントがトリガーされます。
AJAX リクエストを送信します: イベントハンドラーで、PHP ファイルに対して AJAX リクエストを作成します (例: update.php)、最初のドロップダウンで選択した値に基づいて 2 番目のドロップダウンボックスのオプションを返します。 box.
AJAX 応答の処理: AJAX 要求の成功コールバックで、応答データを解析します。これには、2 番目のドロップダウンに追加されるオプションの HTML コードが含まれます。 box.
2 番目のドロップダウンボックスを更新します: JavaScript を使用して、2 番目のドロップダウンボックスの HTML を更新します。応答データから生成されたオプション。
2 番目のドロップダウンボックスを有効にします: オプションが更新されたら、ユーザー選択用の 2 番目のドロップダウンボックスを有効にします。

これを示す例は次のとおりですアプローチ:

tester.php:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('#first_dropdown').change(function() {
                var value = $(this).val();
                $.ajax({
                    url: 'update.php',
                    method: 'POST',
                    data: { value: value },
                    success: function(response) {
                        $('#second_dropdown').html(response);
                        $('#second_dropdown').prop('disabled', false);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <select>

ログイン後にコピー

update.php:

<?php
if (isset($_POST['value'])) {
    $selectedValue = $_POST['value'];
    $data = array();

    // Here you would typically query your database to retrieve options based on the selected value.
    if ($selectedValue == 'category1') {
        $data[] = '<option value="option1">Option 1</option>';
        $data[] = '<option value="option2">Option 2</option>';
    } elseif ($selectedValue == 'category2') {
        $data[] = '<option value="option3">Option 3</option>';
        $data[] = '<option value="option4">Option 4</option>';
    }

    echo implode('', $data);
}
?>

ログイン後にコピー

このアプローチに従って、各ドロップダウンボックスのオプションが前のドロップダウンでの選択に依存する、マルチレベルの動的なドロップダウンボックスを作成できます。ボックス。

以上がAJAX と PHP を使用して依存ドロップダウンボックスにデータを入力するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。