Heim >Backend-Entwicklung >PHP-Tutorial >Wie kann ich mithilfe von jQuery und PHP dynamisch ein zweites Dropdown-Feld basierend auf der Auswahl in einem ersten Dropdown-Feld füllen?
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 ArquetteOriginal
- 2024-12-23 08:18:16871Durchsuche
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">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;
?>
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!
In Verbindung stehende Artikel
Mehr sehen- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- Alle Ausdruckssymbole in regulären Ausdrücken (Zusammenfassung)