Contenu d'un div qui change en fct° du choix
Theophile76
Messages postés
1817
Date d'inscription
Statut
Membre
Dernière intervention
-
Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention -
Theophile76 Messages postés 1817 Date d'inscription Statut Membre Dernière intervention -
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 :
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.
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.
A voir également:
- Contenu d'un div qui change en fct° du choix
- Change dns - Guide
- Liste déroulante de choix excel - Guide
- Word a trouvé du contenu illisible - Guide
- Fusionner deux cellules excel en gardant le contenu - Guide
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
4 réponses
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 :)
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 :)
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, ...)
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, ...)
J'ai trouvé quelque chose de pas mal du coté de jquery, je vais voir ce que ça donne ^^:
On s'ennuie pas avec l'informatique :)
<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 :)
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.