Wie aktualisiere ich Dropdown-Optionen automatisch basierend auf der ersten Dropdown-Auswahl ohne Datenbank?

So aktualisieren Sie Optionen in einem zweiten Dropdown-Menü automatisch basierend auf der Auswahl in einem ersten Dropdown-Menü, ohne eine Datenbank zu verwenden

Sie haben zwei Dropdown-Menüs, in denen Die Optionen werden nicht aus einer Datenbank abgerufen. Im ersten Dropdown-Menü kann der Benutzer eine Kategorie auswählen. Die Optionen im zweiten Dropdown-Menü hängen von der Auswahl im ersten Dropdown-Menü ab.

Wenn der Benutzer beispielsweise im ersten Dropdown-Menü die Option Erstes auswählt, sollten im zweiten Dropdown-Menü die Optionen Smartphone und Ladegerät. Wenn der Benutzer seine Auswahl auf die Option Zweite ändert, sollten im zweiten Dropdown-Menü nun die Optionen Basketball und Volleyball angezeigt werden.

Implementierung ohne Verwendung einer Datenbank

<select name="category" onchange="changeSecondDropdown(this)"><p></p>
<pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

<script><p>function changeSecondDropdown(category) {<br> const options = {<br></p> <pre class="brush:php;toolbar:false">&quot;1&quot;: [&quot;Smartphone&quot;, &quot;Charger&quot;], &quot;2&quot;: [&quot;Basketball&quot;, &quot;Volleyball&quot;]</pre>};<p></p>// Optionen im zweiten Dropdown löschen<p> const itemsDropdown = document.getElementById("items");<br> itemsDropdown.innerHTML = "";<br></p>// Füge die neuen Optionen basierend auf der ausgewählten Kategorie hinzu<p> const selectedOptions = options[category.value];<br> for (const option of selectedOptions) {<br></p> <pre class="brush:php;toolbar:false">const newOption = document.createElement(&quot;option&quot;); newOption.value = option; newOption.textContent = option; itemsDropdown.appendChild(newOption);</pre>}<p>}<br></script>

Diese Implementierung verwendet ein JavaScript-Objekt, um die Optionen für jede Kategorie zu speichern. Wenn der Benutzer die Auswahl im ersten Dropdown-Menü ändert, wird die Funktion „changeSecondDropdown“ aufgerufen, die die Optionen im zweiten Dropdown-Menü basierend auf der ausgewählten Kategorie aktualisiert.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich Dropdown-Optionen automatisch basierend auf der ersten Dropdown-Auswahl ohne Datenbank?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!