jQuery と PHP を使用して、最初のドロップダウンボックスでの選択に基づいて 2 番目のドロップダウンボックスを動的に設定するにはどうすればよいですか?-PHPチュートリアル-php.cn

jQuery と PHP を使用して、最初のドロップダウンボックスでの選択に基づいて 2 番目のドロップダウンボックスを動的に設定するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-23 08:18:16

オリジナル

887 人が閲覧しました

How can I dynamically populate a second drop-down box based on the selection in a first drop-down box using jQuery and PHP?

ドロップダウンボックスを動的に設定する

Web 開発で使用される一般的な手法は、ドロップダウンボックスを表示できるインタラクティブな Web フォームを作成することです。前のドロップダウンボックスで選択した値に依存するオプション。この機能は通常、JavaScript (jQuery) とサーバーサイドスクリプト (PHP) の組み合わせを使用して実現されます。

コード例の説明

この特定のシナリオでは、最初のドロップダウンボックスで選択された値に基づいて 2 番目のドロップダウンボックスに値を入力しようとしています。提供されているコードは、次の手順を使用してこれを実現します。

ユーザーの選択のキャプチャ: ユーザーが最初のドロップダウンボックスで選択を変更すると、jQuery イベントハンドラーが引き起こされた。このハンドラーは、$(this).val() を使用して選択されたオプションの値をキャプチャします。
リクエストの送信: jQuery の AJAX 機能を使用して、非同期リクエストがサーバー側に送信されます。 PHP スクリプト、another_php_file.php。リクエストとともに、選択されたオプション sel_stud の値がデータとして渡されます。
サーバー側処理: another_php_file.php スクリプトはポストされたデータを受信し、必要なデータベースクエリを実行して、選択したオプションに固有の関連データを取得し、更新された 2 番目のドロップダウンの HTML マークアップを含む応答を組み立てます。 box.
ドロップダウンボックスの更新: サーバーから受信した応答は、AJAX 成功ハンドラー関数によって処理されます。 2 番目のドロップダウンボックスの HTML マークアップは、$('#LaDIV').html(whatigot); を使用して DOM に挿入されます。

カスタマイズされた例

このコード例は、最初のドロップダウンボックスを使用して生徒の名前を選択するカスタマイズされた実装を示しています。選択すると、2 番目のドロップダウンボックスに、その生徒が教えた対応するクラスが表示されます。

tester.php

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#stSelect').change(function() {
                var sel_stud = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "another_php_file.php",
                    data: 'theOption=' + sel_stud,
                    success: function(whatigot) {
                        $('#LaDIV').html(whatigot);
                    }
                });
            });
        });
    </script>
</head>
<body>

    <select name="students">

ログイン後にコピー

another_php_file.php

<?php

    // Database Connection
    $server = 'localhost';
    $login = 'root';
    $pword = '';
    $dbname = 'test';
    mysql_connect($server,$login,$pword) or die($connect_error);
    mysql_select_db($dbname) or die($connect_error);

    // Get POST Data
    $selStudent = $_POST['theOption'];

    // Query Database
    $query = "SELECT * FROM `class` WHERE `teacher_id` = $selStudent";
    $result = mysql_query($query) or die('Fn Error: ' . mysql_error());
    $num_rows_returned = mysql_num_rows($result);

    // Build Response HTML
    $r = '
        <select>
    ';

    if ($num_rows_returned > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $r = $r . '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }
    } else {
        $r = '<p>No classes taught by this student</p>';
    }

    // Echo Response
    echo $r;
?>

ログイン後にコピー

このカスタマイズされたソリューションは、クラスを表示するために 2 番目のドロップダウンボックスを調整します。選択した生徒に基づいて、動的に入力されるドロップダウンボックスに柔軟で使いやすいフォームエクスペリエンスを提供します。

以上がjQuery と PHP を使用して、最初のドロップダウンボックスでの選択に基づいて 2 番目のドロップダウンボックスを動的に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jQuery と PHP を使用して、最初のドロップダウン ボックスでの選択に基づいて 2 番目のドロップダウン ボックスを動的に設定するにはどうすればよいですか?

jQuery と PHP を使用して、最初のドロップダウンボックスでの選択に基づいて 2 番目のドロップダウンボックスを動的に設定するにはどうすればよいですか?