Comment mettre à jour automatiquement les options de liste déroulante en fonction de la première sélection déroulante sans base de données ?

Comment mettre à jour automatiquement les options dans une deuxième liste déroulante en fonction de la sélection dans une première liste déroulante sans utiliser de base de données

Vous avez deux listes déroulantes où les options ne sont pas extraites d'une base de données. La première liste déroulante permet à l'utilisateur de sélectionner une catégorie. Les options de la deuxième liste déroulante dépendent de la sélection dans la première liste déroulante.

Par exemple, si l'utilisateur choisit l'option Premier dans la première liste déroulante, la deuxième liste déroulante doit afficher les options Smartphone et Chargeur. Si l'utilisateur modifie sa sélection pour l'option Deuxième, la deuxième liste déroulante devrait maintenant afficher les options Basketball et Volleyball.

Implémentation sans utiliser de base de données

<select name="category" onchange="changeSecondDropdown(this)"></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>

Copier après la connexion

<script><br>function changeSecondDropdown(category) {<br> options const = {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div> <p>};</p> <p>// Effacez les options dans la deuxième liste déroulante<br> const itemsDropdown = document.getElementById("items");<br> itemsDropdown.innerHTML = "";</p> <p>// Ajouter les nouvelles options en fonction de la catégorie sélectionnée<br> const selectedOptions = options[category.value];<br> for (const option of selectedOptions) {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const newOption = document.createElement(&quot;option&quot;); newOption.value = option; newOption.textContent = option; itemsDropdown.appendChild(newOption);</pre><div class="contentsignin">Copier après la connexion</div></div> <p>}<br>}<br></script>

Cette implémentation utilise un objet JavaScript pour stocker les options de chaque catégorie. Lorsque l'utilisateur modifie la sélection dans la première liste déroulante, la fonction changeSecondDropdown est appelée, qui met à jour les options dans la deuxième liste déroulante en fonction de la catégorie sélectionnée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!