Se connecter avec
S'enregistrer | Connectez-vous

[Résolu] [Php] Listes déroulantes à contenu interractif

Dernière réponse : dans Programmation

Bonjour tout le monde !
Voilà, je souhaite faire deux liste déroulantes contanant des informations provenant d'une base de données. Jusque là pas de probleme. Mais j'aimerai en plus de celà, que le contenu de la seconde liste déroulante varie en fonction de l'option choisie dans la premiere. Tout le monde me suis ?
Oki, en fait j'ai une table "catégorie" [id,nom_categorie], et une autre "fonction" [id,id_categorie,nom_fonction]. Quand je selectionne une categorie, "jeu" par exemple, la seconde m'afficherai , "aventure", "stratégie", etc ... Maintenat imaginons que je choisisse finallement la categorie "activités" dans la premiere liste, la seconde m'afficherai "sport", "distractions" etc ...

Ce systeme j'ai réussi à le mettre en place, en passant un paramettre à chaque fois mais cette technique s'avere un peu fastidieuse pour l'utilisateur : a chaque fois, il faut valider la premiere liste, pour en suite retomber sur une page qui récupère en POST la catégorie. De même on selectionne la fonction et l'on revalide pour obtenir les résultats répondants à ces deux critères.

J'aimerai donc qu'en choisissant la catégorie, la seconde liste soit immédiatement mise à jour contenant les fonctions correspondant avec la catégorie selectionnée. Ainsi il ne resterai plus qu'a selectionner la fonction et les résultats s'afficherait.

Je sais pas si j'ai bien réussi à me faire comprendre ...
Je vous montre donc ce que j'ai déjà fait : www.dream-ressources.com/telechargement.php

Merci d'avance pour l'attention prêtée à ce message!

Cordialement :) 

Autres pages sur : resolu php listes deroulantes contenu interractif

Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

Dans ton cas, le plus simple est de faire une requête de type XMLHttpRequest.
Pour faire ça plus facilement, tu peux utiliser un framework ajax.

Il faut que tu aies une page qui te retourne toutes les différentes options pour chaque ID envoyé à cette même page.

Exemple, ta page "options.php", tu l'appelles avec l'ID 5 (options.php?id=5), elle va te retourner toutes les options que tu veux.

bonjour,

si tu veux garder ton système mais éviter l'appui sur le bouton, tu peux utiliser l'attribut "onchange" de la liste déroulante.

sinon, tu peux charger toutes les catégories et sous-catégories (dans un tableau) et traiter ca avec javascript.

ou enfin, le must, garder ton système, mais faire appel à ajax pour recharger qu'une portion de la page (les nouvelles liste déroulantes)

EDIT: on se grille mutuellement :p 

Tout d'abord un grand merci à vous deux pour vos réponses !
Je vois que vous avez tous deux proposé la solution : ajax, ca sera donc pour moi l'occasion de découvrir un peu celà =)

J'ai donc fait une petite recherche et cette dernieère a débouchée sur cette page que j'ai commencé a dépioter : http://www.xul.fr/xml-ajax.html

Et donc là je viens de découvrir quelque chose grace à vous deux : il est donc possible de recharger une portion de page ('Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière.
Par exemple le contenu d'un champ de formulaire peut être changé, sans avoir à recharger la page avec le titre, les images, le menu, etc.
").

Serait ce possible d'avoir une petite explication approfondie et/ou (je veux pas non plus vous embeter avec ca) un petit bout de code pour illustrer celà, si possible avec une liste déroulante (sinon c'est pas grave, sans liste déroulante ca ira tout aussi bien) ^^.

J'en ai déjà trouvé un http://www.anaa.eu/demo-chain.html
Anna semble etre le module le plus adapté à mes besoins (Get et Post) Dites mois ou j'ai faux et aussi ou j'ai bon, si j'ai pas tout faux) ... :pt1cable: 

En tout cas une nouvelle fois merci à vous deux ! :love: 

Avec une recherche encore un peu plus approfondie, j'ai trouvé le cas dans lequel je me trouve actuellement :

http://www.developpement-web.net/demos/demo_9/

Avec les explications :

http://www.developpement-web.net/astuces/ajax/actualiser_liste_deroulante/

Ici l'exemple est basé sur les départements mais le principe est le meme ! Je n'ai donc plus qu'à adapter le tout à mes besoins, c'est à dire en récupérant les valeurs stockées dans la base de données =)

Un grand merci encore à vous deux !

Cordialement

Comme promis, la résolution à ma problématique!

Contenu de la page index.php
  1. <html> 
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  4.     <script type="text/javascript"> 
  5.     function sendData(param, page) 
  6.     { 
  7.         if(document.all) 
  8.         { 
  9.             //Internet Explorer 
  10.             var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ; 
  11.         }
  12.         else 
  13.         { 
  14.             //Mozilla 
  15.             var XhrObj = new XMLHttpRequest(); 
  16.         }
  17.  
  18.         var content = document.getElementById("contenu"); 
  19.  
  20.         XhrObj.open("POST", page); 
  21.  
  22.         XhrObj.onreadystatechange = function() 
  23.         { 
  24.             if (XhrObj.readyState == 4 && XhrObj.status == 200) 
  25.                 content.innerHTML = XhrObj.responseText ; 
  26.         } 
  27.  
  28.         XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
  29.         XhrObj.send(param); 
  30.     }
  31.  
  32.     </script> 
  33. </head> 
  34. <body> 
  35.  
  36. <?php 
  37.    include('../conf.php');
  38.  
  39.    // Création d'une variable de test
  40.    $i=0; 
  41.    // Création d'une variable pour conserver la valeur du premier enregistrement
  42.    $j=0; 
  43.  
  44.    // Récupération des données 
  45.    $req_categorie = "SELECT id,nom_categorie FROM dr_telechargement_categorie ORDER BY nom_categorie;"; 
  46.    $result= mysql_query ($req_categorie) or die ("Récupération des données impossible"); 
  47.    echo "<form method='POST' action='index.php'>";?>   <select size="1" name="marque" OnChange="sendData('id='+this.value,'index_actu_liste.php')" onKeyUp="sendData('id='+this.value,'index_actu_liste.php')"> 
  48.  
  49. <?php      
  50.    while ($dt=mysql_fetch_row($result)) 
  51.    { 
  52.     // Remplissage de la liste déroulante, des données récupérées     
  53.     echo "<option value=".($dt[0]).">".($dt[1])."</option>"; 
  54. 	// On conserve la valeur du premier enregistrement
  55.     if ($i==0) { $j=$dt[0]; $i=1; }
  56.    } 
  57.  
  58.    ?>     
  59.    </select><br><br> 
  60.  
  61.  
  62.  
  63.    <div id="contenu"> 
  64.  <?php   
  65. 	// Affichage des sous catégories correspondant à la catégorie
  66. 	echo "<select size='1' name='categorie'>";    
  67.     $rq="SELECT * FROM dr_telechargement_fonction WHERE id_categorie=".$j." ORDER BY nom_fonction;"; 
  68.     $result= mysql_query ($rq) or die ("Recuperation des données impossible"); 
  69.      // On innitialise la variable i
  70.     $i=0; 
  71.     while ($dt=mysql_fetch_row($result)) 
  72.     {  
  73.      echo "<option value=".utf8_encode($dt[0]).">".utf8_encode($dt[2])."</option><br>"; 
  74.     }     
  75.     echo "</select>"; 
  76.    ?> 
  77.    </div>


Contenu de la page index_actu_liste.php
  1. <?php 
  2. // Déclaration de ce qui va être afficher
  3. header('Content-type: text') ;  
  4.  
  5. // On test les POST précédemment émis 
  6.  
  7. if(isset($_POST['id']) && !empty($_POST['id']) ){ 
  8. 	include('../conf.php'); 
  9.     $rq="SELECT id,id_categorie,nom_fonction FROM dr_telechargement_fonction WHERE id_categorie=".$_POST['id']." ORDER BY nom_fonction;"; 
  10.     $result= mysql_query ($rq) or die ("Select impossible"); 
  11.  
  12.  	// On initialise le variable la variable i 
  13.  
  14.     $i=0; 
  15.     if (mysql_num_rows($result)>0) 
  16.     { 
  17.       echo "<select size='1' name='fonction'>"; 
  18.     } 
  19.     else 
  20.     { 
  21.       echo utf8_encode("Aucune sous catégories disponible");     
  22.     } 
  23.     while ($dt=mysql_fetch_row($result)) 
  24.     {      
  25.      echo "<option value=".utf8_encode($dt[0]).">".utf8_encode($dt[2])."</option><br>"; 
  26.     }     
  27.     echo "</select>"; 
  28. } 
  29.  
  30. ?>


Pour ceux qui marchent sur ces traces ... ;) 
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde