Wie kann ich mithilfe von jQuery und PHP dynamisch ein zweites Dropdown-Feld basierend auf der Auswahl in einem ersten Dropdown-Feld füllen?-PHP-Tutorial-php.cn

Wie kann ich mithilfe von jQuery und PHP dynamisch ein zweites Dropdown-Feld basierend auf der Auswahl in einem ersten Dropdown-Feld füllen?

Patricia Arquette

Freigeben： 2024-12-23 08:18:16

Original

887 Leute haben es durchsucht

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

Dropdown-Felder dynamisch füllen

Eine beliebte Technik in der Webentwicklung ist die Erstellung interaktiver Webformulare, in denen Dropdown-Felder angezeigt werden können Optionen, die vom ausgewählten Wert eines vorangehenden Dropdown-Felds abhängen. Diese Funktionalität wird üblicherweise durch eine Kombination aus JavaScript (jQuery) und serverseitigem Scripting (PHP) erreicht.

Erklärung des Beispielcodes

In diesem speziellen Szenario sind Sie es Ich versuche, das zweite Dropdown-Feld basierend auf dem im ersten Dropdown-Feld ausgewählten Wert zu füllen. Der bereitgestellte Code erreicht dies mithilfe der folgenden Schritte:

Erfassen der Auswahl des Benutzers: Wenn der Benutzer die Auswahl im ersten Dropdown-Feld ändert, wird ein jQuery-Ereignishandler angezeigt ausgelöst. Dieser Handler erfasst den Wert der ausgewählten Option mit $(this).val().
Senden einer Anfrage: Mithilfe der AJAX-Funktionen von jQuery wird eine asynchrone Anfrage an die Serverseite gesendet PHP-Skript, another_php_file.php. Zusammen mit der Anfrage wird der Wert der ausgewählten Option sel_stud als Daten übergeben.
Serverseitige Verarbeitung: Das Skript another_php_file.php empfängt die geposteten Daten und führt die erforderlichen Datenbankabfragen durch Ruft relevante Daten ab, die für die ausgewählte Option spezifisch sind, und stellt eine Antwort zusammen, die HTML-Markup für das aktualisierte zweite Dropdown-Feld enthält.
Aktualisierung der Dropdown-Feld: Die vom Server empfangene Antwort wird von der AJAX-Erfolgshandlerfunktion verarbeitet. Das HTML-Markup für das zweite Dropdown-Feld wird mit $('#LaDIV').html(whatigot); in das DOM eingefügt.

Benutzerdefiniertes Beispiel

Dieses Codebeispiel zeigt eine benutzerdefinierte Implementierung, bei der das erste Dropdown-Feld zur Auswahl von Schülernamen verwendet wird. Nach der Auswahl zeigt das zweite Dropdown-Feld die entsprechenden Kurse an, die von diesem Schüler unterrichtet wurden.

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">

Nach dem Login kopieren

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;
?>

Nach dem Login kopieren

Diese maßgeschneiderte Lösung passt das zweite Dropdown-Feld so an, dass Klassen basierend auf dem ausgewählten Schüler angezeigt werden und bietet so eine flexible und flexible Lösung benutzerfreundliches Formularerlebnis für dynamisch ausgefüllte Dropdown-Felder.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von jQuery und PHP dynamisch ein zweites Dropdown-Feld basierend auf der Auswahl in einem ersten Dropdown-Feld füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!