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!