Heim > Artikel > Backend-Entwicklung > Wie implementiert man automatisch wechselnde Optionen im zweiten Dropdown-Menü basierend auf der ersten Dropdown-Auswahl?
Wie implementiert man automatisch wechselnde Optionen im zweiten Dropdown-Menü basierend auf der ersten Dropdown-Auswahl?
- DDDOriginal
- 2024-10-21 06:45:02856Durchsuche
Automatische Änderung der Optionen im zweiten Dropdown-Menü basierend auf der ersten Dropdown-Auswahl
Beim Erstellen mehrerer Dropdown-Menüs mit den Optionen im zweiten Das Menü hängt von der im ersten Menü getroffenen Auswahl ab. Dies ist möglich, ohne auf eine Datenbank angewiesen zu sein.
Ersteinrichtung
Das erste Dropdown-Menü wird Zeigt eine Liste von Kategorien an, während im zweiten Dropdown-Menü Elemente angezeigt werden, die mit der ausgewählten Kategorie verknüpft sind.
Erstes Dropdown-Menü:
<select name="category"></p> <pre class="brush:php;toolbar:false"><option value="0">None</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option>
Zweite Dropdown-Liste:
<select name="items"><br></select><br>
Dynamische Optionen im zweiten Dropdown
Um die Optionen im zweiten Dropdown basierend auf der Auswahl im ersten Dropdown zu aktualisieren, benötigen wir eine AJAX-Funktion, die die ausgewählte Kategorie an ein PHP-Skript sendet.
AJAX-Funktion:
<script type="text/javascript"></p>
<pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
$.ajax({
url: 'process.php?parent=' + parent;
success: function(data) {
$("#sub").html(data);
}
});
}
Diese Funktion ist an das onchange-Ereignis des ersten Dropdowns angehängt.
Platzieren Sie im HTML ein weiteres Auswahlelement mit der ID „sub“, um die dynamisch generierten Optionen anzuzeigen.
<select onchange="ajaxfunction(this.value)"></p> <pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->
Verarbeitung des PHP-Skripts
Das Skript „process.php“ ist für die Generierung der Optionen für verantwortlich das zweite Dropdown-Menü basiert auf der ausgewählten Kategorie.
process.php:
<?php</p><pre class="brush:php;toolbar:false">$parent = array(
"First" => array("Smartphone", "Charger"),
"Second" => array("Basketball", "Volleyball"),
"Third" => array("Apple", "Orange"),
"Fourth" => array("Dog", "Cat")
);
foreach ($parent[$_GET["parent"]] as $id => $name)
echo '<option value="', $id,'">', $name,'</option>'</p>
<p>?><br>
In diesem Fall haben wir ein Array verwendet, um die Kategorie-Element-Beziehungen zu definieren. Dies kann jedoch leicht angepasst werden, um die Daten auch aus einer Datenbank abzurufen.
Das obige ist der detaillierte Inhalt vonWie implementiert man automatisch wechselnde Optionen im zweiten Dropdown-Menü basierend auf der ersten Dropdown-Auswahl?. 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)