Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Backend-Entwicklung > PHP-Tutorial > 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?

DDD
Freigeben： 2024-10-21 06:45:02
Original
965 Leute haben es durchsucht

How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>
Nach dem Login kopieren


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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}
Nach dem Login kopieren


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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->
Nach dem Login kopieren