Changement contenu d'une page en fonction d'une liste déroulante

Changement contenu d'une page en fonction d'une liste déroulante - HTML/CSS - Programmation

Marsh Posté le 25-04-2008 à 11:05:52    

Salut à tous [:black_lord]  
 
Je voudrais en fait que le contenu de ma page change en fonction du choix qu'à fait l'utilisateur dans une liste déroulante dynamique.
J'avais déjà fait une ébauche :

Code :
  1. <html>
  2.   <head>
  3.     <title>- Accueil</title>
  4.     <script language="JavaScript">
  5.       function affichage(champ) {
  6.         // on affecte a la zone de texte la variable passee par la fonction appelee sur le bouton radio
  7.         document.formulaire.explication.value = champ;
  8.       }
  9.       function affichageliste(element) {
  10.         // on cree les explications qui s'afficheront dans la zone de texte pour tous les 'selects'
  11.         // le nom des variables doit se composer du nom de la liste suivi du numero de l'option dans la liste (on commence a 0, pas a 1)
  12.         var liste1_1 = 'Tout sur le html 4.0';
  13.         var liste1_2 = 'Un peu de feuilles de style';
  14.         var liste1_3 = 'Dynamisez vos pages !';
  15.         selection = element.options[element.options.selectedIndex].index;
  16.         // si le choix est le premier (Choisissez), on nettoie la zone de texte
  17.         if ( selection == '0' ) {
  18.           affichage(vide);
  19.         }
  20.         else {
  21.           // si le choix n'est pas le premier, on lance l'affichage du choix
  22.           sel = element.name;
  23.           optionchoisie = eval(sel + selection);
  24.           affichage(optionchoisie);
  25.         }
  26.       }
  27.     </script>
  28.   </head>
  29.   <body>
  30.     <form name="formulaire">   
  31.     <select name="liste1_" OnChange="affichageliste(liste1_);">
  32.      <option>Choisissez
  33.      <option>HTML
  34.      <option>CSS
  35.      <option>JavaScript
  36.      </select>
  37.       <br />
  38.       <br />
  39.     <input type="text" name="explication" wrap="virtual"></input>
  40.     </form>
  41.   </body>
  42. </html>


 
Mais là, ça m'affiche le contenu changeant dans un "input", je voudrais que ça ne l'affiche pas dans un "input".
 
 
Par avance, merci pour votre aide. ;)


Message édité par zoukoufxxx le 25-04-2008 à 11:06:16

---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
Reply

Marsh Posté le 25-04-2008 à 11:05:52   

Reply

Marsh Posté le 25-04-2008 à 11:22:00    

C'est bon je viens de trouver mon bonheur :jap:


---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
Reply

Marsh Posté le 15-05-2008 à 21:37:18    

Pourrait-on profiter de ta découverte ???
 
Merci d'avance !!!


---------------
------------------------------
Reply

Marsh Posté le 16-05-2008 à 09:58:56    

[:black_lord]  
 
Voiloù monsieur :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.   <head>
  4.     <title>Ceci est le titre de la page</title>
  5.     <script type="text/javascript">
  6.       function catsel(sel) {
  7.         //if (sel.value=="-1" ) return;
  8.         var opt=sel.getElementsByTagName("option" );
  9.         for (var i=0; i<opt.length; i++) {
  10.           var x=document.getElementById(opt[i].value);
  11.           if (x) x.style.display="none";
  12.         }
  13.         var cat = document.getElementById(sel.value);
  14.         if (cat) cat.style.display="block";
  15.       }
  16.     </script>
  17.   </head> 
  18.   <body>
  19.     <table>
  20.       <tr>
  22.         <td>
  23.         Faites un choix :
  24.         </td>
  25.         <td>
  26.           <select onchange="catsel(this)">
  27.           <!--<option value="-1">None</option>!-->
  28.             <option value="1">Choix 1</option>
  29.             <option value="2">Choix 2</option>
  30.             <option value="3">Choix 3</option>
  31.             <option value="4">Choix 4</option>
  32.             <option value="5">Choix 5</option>
  33.             <option value="6">Choix 6</option>
  34.             <option value="7">Choix 7</option>
  35.             <option value="8">Choix 8</option>
  37.           </select>
  38.         </td>
  39.       </tr>
  40.       <tr>
  41.         <td colspan="2">
  42.           <div id="1" style="display:block">
  43.             <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 1</td></tr></table>
  44.           </div>
  45.           <div id="2" style="display:none">
  46.             <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 2</td></tr></table>
  47.           </div>
  48.           <div id="3" style="display:none">
  49.             <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 3</td></tr></table>
  50.           </div>
  51.           <div id="4" style="display:none">
  52.             <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 4</td></tr></table>
  53.           </div>
  54.           <div id="5" style="display:none">
  55.             <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 5</td></tr></table>
  56.           </div>
  57.           <div id="6" style="display:none">
  58.             <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 6</td></tr></table>
  59.           </div>
  60.           <div id="7" style="display:none">
  61.             <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 7</td></tr></table>
  62.           </div>
  63.           <div id="8" style="display:none">
  64.             <table border="0" cellspacing="3" cellpadding="0"><tr><td>blabla 8</td></tr></table>
  65.           </div>
  66.         </td>
  67.       </tr>
  68.     </table>
  69.   </body>
  70. </html>


 
À adapter selon tes envies, bien-sûr. ;)


Message édité par zoukoufxxx le 16-05-2008 à 09:59:18

---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
Reply

Sujets relatifs:

Leave a Replay

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