Sujet Précédent Sujet Suivant

Contenu d'un div qui change en fct° du choix

Fermé
Theophile76 Messages postés 1817 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 - 17 nov. 2010 à 10:08
Theophile76 Messages postés 1817 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 - 20 nov. 2010 à 08:34
Bonjour,
voilà je voudrais faire quelque chose mais je ne sais pas trop comment m'y prendre.
En fait j'ai un div1 et un select1, un div2 et un select2, un div3 et un select3 comme ceci : 

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

<select name="select1">
<option>...</option>
...
<option>...</option>
</select>

<select name="select2">
<option>...</option>
...
<option>...</option>
</select>

<select name="select2">
<option>...</option>
...
<option>...</option>
</select>


Je voudrais qu'au moment ou je clique sur une option du select1, le contenu de la div 1 change pour afficher un contenu en rapport avec l'option choisit.

J'ai pensé faire ceci avec des div en mode "display:mode" mais j'ai peur que ça soit compliqué car ça feras pas mal de manip à faire et ça sera pas très propre étant donnée qu'il y aura pas mal d'options dans chaque select.

J'ai donc pensé à créer un php pour chacune des options de chaque select, et de les assigner à un div bien définie avec l'attribue include.

Biensur vous avez peut être une meilleur solution à me proposer ;) et c'est bien pour ça que j'ai posté mon message, pour commencer sur une bonne base.

(Il y a un autre problème qui va se poser c'est que je compte créer un bouton "enregistrer" après tout cela avec 2 choix : enregistrement provisoire (cookies) ou enregistrement (connections membre).
Je pense bien que cette étape sera trop compliqué pour l'instant, mais je veux juste que ma base me permettre de faire ceci par la suite, voilà pourquoi je parlais du php.)

J'ai fait un petit schéma pour essayer d'être plus clair :)
http://nsa20.casimages.com/img/2010/11/17/101117101041299060.png

Merci.




4 réponses

Réponse 1 / 4
Utilisateur anonyme
17 nov. 2010 à 15:19
Salut,

Avec du javascript ;)

Tu lance une fonction js via l'évènement javascript onchange. Et dans cette fonction tu récupère la valeur du SELECT et selon tu modifie ton bloc avec innerHTML.

Bon si tu connais rien du javascript je t'aiderai mais c'est pas trop dans mon habitude de livré un code sur demande, je préfère quand on comprend mon charabia :)
2
Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
17 nov. 2010 à 21:06
Entièrement d'accord avec lui !
Dans le code de tes selectBox, tu ajoutes quelque chose du genre onChange="changerDiv1()" (pour la selectBox1)
Du coup, quand tu sélectionnera autre chose, tu appelleras une fonction changerDiv1() (que tu auras codée dans un fichier .js à part, ou dans ta head).

Cette fonction changerDiv1() fera quelque chose du genre : 

maDiv = document.getElementById('div1') ;
maDiv.innerHTML="le texte a ajouter" ;


Dans tous les cas le JS te permet de modifier ta page sans la recharger.
0
Réponse 2 / 4
Theophile76 Messages postés 1817 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
18 nov. 2010 à 04:35
Merci beaucoup pour vos réponse.
j'avais pensais au js mais je me poser la question de savoir si par la suite, il y aurais moyen de "sauvegarder ce choix" pour un membre de mon site.
Car le but c'est qu'après avoir fait ses sélections, on puisse les enregistrer pour ne pas avoir besoin de les refaire quand on revient sur le site (soit dans les cookies, soit avec son compte membre).
Enfin cette étape n'est pas encore d'actualité mais le sera bientôt, je me demande donc si le js ne me bloquera pas sur ce point ?

Sinon je veut bien de l'aide sur le code js, car je sais à peut prêt le déchiffrer mais pas du tout le créer.
J'ai un code js que j'utilise pour masque/afficher une div, ça va pour 2/3 div mais là il y auras environ 50choix en tout dans les OPTION des SELECT et je ne vois donc pas trop comment faire et voilà pourquoi j'apprécie ce que tu me propose Alexis.

Mihawk, je te remercie, cependant si j'ai bien compris ton code me permettra de changer un texte, mais je me suis mal exprimé et j'en suis désolé, car en fait, il y aura du texte mais également le div qui contient le texte, et son style ... (bacgkroud-image, :hover, ...)
0
Réponse 3 / 4
Theophile76 Messages postés 1817 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
Modifié par Theophile76 le 19/11/2010 à 20:00
J'ai trouvé quelque chose de pas mal du coté de jquery, je vais voir ce que ça donne ^^: 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){  // le document est chargé 
   $("a").click(function(){  // on selectionne tous les liens et on d?finit une action quand on clique dessus 
 page=($(this).attr("href")); // on recuperer l' adresse du lien 
 $.ajax({  // ajax 
  url: page, // url de la page ? charger 
  cache: false, // pas de mise en cache 
  success:function(html){ // si la requêté est un succès 
   afficher(html);     // on execute la fonction afficher(donnees) 
  }, 
  error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete 
  } 
 }); 
 return false; // on desactive le lien 
   }); 
}); 
  
function afficher(donnees){ // pour remplacer le contenu du div contenu 
 $("#contenu").empty(); // on vide le div 
 $("#contenu").append(donnees); // on met dans le div le r?sultat de la requete ajax 
} 
</script> 
  
<a href="contenu1.html">contenu1.html</a> 
  
<a href="contenu2.html">contenu2.html</a> 
  
<div id="contenu"> 
 Contenu avant utilisation des liens 
</div>


On s'ennuie pas avec l'informatique :)
0
Réponse 4 / 4
Theophile76 Messages postés 1817 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
20 nov. 2010 à 08:34
le problème avec ce code c'es qu'il ne fonctionne qu'avec un lien, et moi j'en cherche un qui fonctionnerais avec des OPTION de SELECT.
0

Discussions similaires

Savoir de quel ville à été envoyé le message
pedro1209 -
Pierr10 -

7 réponses
Youtube: Ce contenu n'est pasdisponible dans votre pays
nesrinedu30 -
Ref1 -

10 réponses
Compte facebook piraté, mail chngé, appareils deconnectés
SnkFan -
MPMP10 -

8 réponses
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
compte facebook piraté et adresse email changé
keseh -
Lapourax -

2 réponses