11548 sujets

JavaScript, DOM et API Web HTML5

Liste déroulante ?

bonjour,

J'ai sur mon site un calendrier résumant différentes compétitions (vtt, raid, trail...) : http://chti.sportif.free.fr/calendrier.htm

J'aimerais laisser la possibilité aux visiteurs de choisir parmi une liste déroulante (ou des cases à cocher) afin de trier en fonction de leur gout comme sur ce site :
http://www.matrace.fr/

Je sais creer la liste déroulante (ex : http://www.startyourdev.com/HTML/Balise-OPTION.html) mais je ne sais pas comment récupérer les élements

ex si je choisis dans liste VTT, je souhaite que seulement les courses VTT apparaissent mais sans recharger toute la page, et sans bouton submit.

Comment procéder ?

Merci d'avance
Modifié par CyberNord (04 Jun 2008 - 22:34)
Bonjour,

Si tu ne veux pas de rafraîchissement, le mieux est de faire cela en Ajax.

Pour cela, il te faut ajouter un événement onchange à ta balise select qui aura pour effet de lancer une fonction Javascript à chaque sélection d'un item de la liste déroulante.

Ensuite attribuer une valeur (value) à chacune de tes balises <option>, valeur qui sera transmise au script PHP via la fonction Javascript appelante. La requête devrait ressembler à cela en PHP :

$query="SELECT champ1,champ2,...,champx FROM ta_table WHERE sport='".$sport_selectionne."'";

où la variable $sport_selectionne contiendra ton critère de filtrage (value de l'item sélectionné dans la liste déroulante).

Il ne restera alors plus qu'à écrire tes données dans un fichier XML que la fonction Javascript traitera en retour pour en extraire les données puis modifier la page dynamiquement.

Si tu veux un exemple de code, voir ce post
Modifié par kalipka (05 Jun 2008 - 18:59)
merci de ta réponse. Cela me semble bien plus compliqué que je ne le pensais. Existe t-il un tutoriel plus détaillé ?
désolé Cybernord, je ne peux pas t'aider mais je me permets d'intervenir :je cherche exactement à réaliser ce qu'il y a sur le site que tu cites plus haut, matrace pour ma FAQ (voir ici)

voici le code utilisé, d'après un tutoriel jquery


<script>
 $(document).ready(function() {
   $('p.toggle').click(function(){
     $('p.showhide').toggle();
   });
 });
</script>


et le HTML :


     <p class="toggle">Qu'est ce que propose le Club Gastronomie & Prestige ?</p>
     <p class="showhide">Le Club Gastronomie et Prestige, est une société lancée en janvier 2008, dont le but est de promouvoir les restaurants de qualité en Martinique. Pour l'instant, le Carnet d'invitation est le seul produit du Club.</p>

     <p class="toggle">Est ce que le carnet d'invitations est valable 1 an ?</p>
     <p class="showhide">Non, le carnet est valable jusqu'à la fin de l'année en cours.</p>
     <p class="toggle">Est ce que le carnet d'invitation est nominatif ?</p>
     <p class="showhide">Oui, le carnet est nominatif. Il n'est pas possible de vendre ou de donner des coupons d'invitation.</p>
     <p class="toggle">Peut-on acheter 1 seul coupon du carnet d'invitation ?</p>
     <p class="showhide">Non, seul le carnet d'invitation complet est en vente.</p>
     <p class="toggle">Le carnet d'invitation fonctionne-t-il comme des tickets restaurants ?</p>
     <p class="showhide">Non, car les tickets restaurants sont un moyen de paiement. Alors que les coupons d'invitat</p>
     <p class="toggle">Qu'est ce que je gagne avec le carnet d'invitation ?</p>
     <p class="showhide">Si vous allez à plusieurs au restaurant, le repas de la personne possédant le c</p>
     <p class="toggle">Nous sommes un groupe d'amis, peut-on utiliser plusieurs carnets à la même table ?</p>


Problème : quand on clique sur une question....toutes les réponses s'affichent ensemble....
C'est normal. Toutes les balises sont identifiées par une seule et même classe.

Dans l'exemple, cela fonctionne car la classe showhide porte sur un seul élément (le titre).
Mais dans ton script, cette classe porte sur plusieurs éléments, d'où le fait qu'ils adoptent le même comportement à l'appel de la fonction.

Je ne connais pas trop JQuery mais en modifiant la fonction un peu ça devrait pouvoir marcher...

Tu peux essayer ça (sans garantie de ma part encore une fois) :

<script>
 $(document).ready(function() {
   $('p.toggle').click(function(){
     $(this.nextSibling).toggle();
   });
 });
</script>


La classe showhide n'est alors plus utile qu'à la CSS...
Modifié par kalipka (12 Jun 2008 - 00:17)
Kalipka, bizarre je n'ai pas recu d'avertissement de ton message...

merci !

mais ca ne marche pas... Smiley murf

ce doit etre assez répandu comme script, et c très pratique pour une FAQ voir ici

Pas d'autre idée ?
Sujet clos
Aller à