Maison > Article > développement back-end > Comment implémenter des options de changement automatique dans le deuxième menu déroulant en fonction de la première sélection déroulante ?
Comment implémenter des options de changement automatique dans le deuxième menu déroulant en fonction de la première sélection déroulante ?
- DDDoriginal
- 2024-10-21 06:45:02856parcourir
Options à changement automatique dans le deuxième menu déroulant en fonction de la première sélection déroulante
Lors de la création de plusieurs menus déroulants où les options du second menu dépendent de la sélection effectuée dans le premier menu, il est possible d'y parvenir sans s'appuyer sur une base de données.
Configuration initiale
Le premier menu déroulant afficher une liste de catégories, tandis que la deuxième liste déroulante affichera les éléments associés à la catégorie sélectionnée.
Première liste déroulante :
<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>
Deuxième liste déroulante :
<select name="items"><br></select><br>
Options dynamiques dans la deuxième liste déroulante
Pour mettre à jour les options de la deuxième liste déroulante en fonction de la sélection dans la première liste déroulante, nous avons besoin d'une fonction AJAX qui envoie la catégorie sélectionnée à un script PHP.
Fonction AJAX :
<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);
}
});
}
Cette fonction est attachée à l'événement onchange de la première liste déroulante.
Dans le HTML, placez un autre élément select avec un identifiant "sub" pour afficher les options générées dynamiquement.
<select onchange="ajaxfunction(this.value)"></p> <pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->
Traitement du script PHP
Le script process.php sera chargé de générer les options pour la deuxième liste déroulante basée sur la catégorie sélectionnée.
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>
Dans ce cas, nous avons utilisé un tableau pour définir les relations catégorie-élément. Cependant, cela peut également être facilement adapté pour récupérer les données d'une base de données.
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!
Articles Liés
Voir plus- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Tous les symboles d'expression dans les expressions régulières (résumé)