[HTML/JS ] Afficher un texte en fonction d'une combobox

Afficher un texte en fonction d'une combobox [HTML/JS ] - HTML/CSS - Programmation

Marsh Posté le 08-02-2004 à 16:07:38    

Je souhaiterai avoir qqch comme ca:
 
Une combo-box contient des mots:  
A coté de la combo-box j'aimerai que s'affiche la définition correspondant à ce mot (que j'aurais préalablement rentré en dur dans le code source)
 
Je voudrais que la définition s'affiche directement après le changement de la combo-box (sans passer par un clic sur un bouton submit) et que ce changement se fasse sans rafraichissement de la totalité de la page.
 
Avez vous des pistes pour coder çà ?

Reply

Marsh Posté le 08-02-2004 à 16:07:38   

Reply

Marsh Posté le 08-02-2004 à 16:14:32    

sorg a écrit :

Je souhaiterai avoir qqch comme ca:
 
Une combo-box contient des mots:  
A coté de la combo-box j'aimerai que s'affiche la définition correspondant à ce mot (que j'aurais préalablement rentré en dur dans le code source)
 
Je voudrais que la définition s'affiche directement après le changement de la combo-box (sans passer par un clic sur un bouton submit) et que ce changement se fasse sans rafraichissement de la totalité de la page.
 
Avez vous des pistes pour coder çà ?
 


 
Oui.
 
Tu regardes ce que donne les évènements comme onchange par exemple. Tu as par exemple onchange="fonction_en_js();"
 
Puis dans ton javascript, tu fais apparaitre un div caché jusqu'à présent en jouant sur la visibilité ou même l'existence du div, avec visibility ou display.
Exemple :
 
document.getElementById('ton-div').style.display = "block";
 
ou encore :
 
document.getElementById('ton-div').style.visibility = "visible";

Reply

Marsh Posté le 08-02-2004 à 16:27:38    

Pour le onchange, ca marche...
Pour le div, je suis un peu largué (débutant inside)
Je crée une section
<div title="def"></div>
Mais je fais comment pour afficher ma définition à l'interieur ?
Et comment lui dire d'etre cachée au début lors du chargement initila de la page ?
Merci ! :jap:


Message édité par sorg le 08-02-2004 à 16:28:37
Reply

Marsh Posté le 08-02-2004 à 16:33:30    

sorg a écrit :

Pour le onchnage, ca marche...
Pour le div, je suis un peu largué (débutant inside)
Je crée une section
<div title="def"></div>
Mais je fais comment pour afficher ma définition à l'interieur ?
Et comment lui dire d'etre cachée au début lors du chargement initila de la page ?
Merci ! :jap:
 


 
1) c'est pas title, mais id="nom_unique_de_ton_div".
 
2) Pour cacher un div au début, tu utilises soit :
 
- les css :
 
exemple :
 
#ton-div {
visibility : hidden;
}
 
ou avec display :
 
#ton-div {
display : none;
}
 
- soit le javascript.
 
A ce moment là, tu fais dans la balise body : onload="fonction_js();"
 
et dans ton js :
 
fonction_js()
{
 document.getElementById('ton-div').style.display = "none";
}
 
ou encore :
 
fonction_js()
{
 document.getElementById('ton-div').style.visibility = "hidden";
}
 
 
 
A noter que visibility et display ne sont pas équivalents.
 
visibility masque ou affiche un div qui est quand même présent sur la page.
display fait apparaitre ou disparaitre un div qui est donc soit présent soit absent de la page.

Reply

Marsh Posté le 08-02-2004 à 16:35:51    

Sinon, vu l'énoncé de ton problème, tu peux aussi n'avoir qu'un seul div et utiliser innerhtml pour remplir dynamiquement ce div avec un contenu en html.
Fait une recherche sur google, c'est enfantin à utiliser.
 
IL te suffit alors de tester quel item est sélectionné, et par rapport à ça remplir ton div avec tel ou tel contenu.

Reply

Marsh Posté le 08-02-2004 à 16:50:29    

C'est bon, ca fonctionne avec les div:
J'ai le code suivant:

Code :
  1. <body>
  2. <script language="JavaScript" type="text/javascript">
  3. <!--
  4. document.write('<form name="selecter"><select name="select1" size=1 onchange="go()">');
  5. document.write('<option value=none>mot clef');
  6. document.write('<option value=none>--------------------');
  7. document.write('<option value="un">1');
  8. document.write('<option value="deux">2');
  9. document.write('<option value="trois">3');
  10. document.write('<option value="quatre">2 + 2');
  11. document.write('</select>');
  12. document.write('</form>');
  13. // end hiding contents -->
  14. </script>
  15. <DIV ID="def">*La definition apparait ici!</DIV>
  16. <script language="JavaScript" type="text/javascript">
  17. <!--
  18. function go(){
  19. if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != "none" ) {
  20. document.getElementById('def').childNodes[0].nodeValue  = document.selecter.select1.options[document.selecter.select1.selectedIndex].value;
  21.  }
  22. }
  23. //-->
  24. </script>
  25. </body>

Reply

Marsh Posté le 04-04-2004 à 12:18:10    

Cool,  
 
C'est exactement ce que je souhaite faire ici:
 
http://forum.hardware.fr/forum2.ph [...] 0&subcat=0
 
Mais comment faire ci ce n'est pas dans un div mais dans la case d'un tableau que je souhaite faire des modifications ?


---------------
Mon comparateur de prix préféré (le miens !):www.infomoinscher.net
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed