Partage
  • Partager sur Facebook
  • Partager sur Twitter

liste déroulante

chocofusee
    11 mars 2010 à 18:25:29

    Bonjour,

    je viens faire appelle a vous car j'aimerais faire une liste de sélection.
    quand je sélectionne quelque chose dans une liste déroulante, je voudrais afficher le contenue juste en dessous, mais quand je sélectionne autre chose, je voudrais que se que j'avais sélectionné auparavant disparaisse et affiche le nouveau contenue.

    avec ce code le contenue que je sélectionne s'ajoute au fure et a mesure.
    Exemple:
    -si je sélectionne vendée, le tableau s'affiche.
    - si je sélectionne pays de loire juste après le nouveau tableau s'affiche en dessous de vendée, hors le tableau vendée devrait disparaitre.

    voici le script:
    <?
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Optimist Brétignollais</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link href="../../css/style.css" title="D&eacute;faut" rel="stylesheet" type="text/css" media="screen" />
	   <script type="text/javascript" src="script.js"></script>
   </head>
 
   <body>
 
       <!-- L'en-tête -->
 
	      <div id="header">
		  </div>
		
		<!-- Barre -->
		<? require("../../barre.php"); ?>
		<!-- Fin barre -->
		
	    <!-- Les menus -->
       <? require("../../menu.php"); ?>  
	    <!--Fin menus -->
		<!-- Social -->
        <? require("../../ressource/widget/social.php"); ?>
		<!-- Fin social -->
</div>
       <!-- Les classements -->
 		                                      <?php
require "../espace_membre/config/conf.php3";
mysql_connect($sql_serveur, $sql_login, $sql_pass);
mysql_select_db($sql_bdd);
$result = mysql_query("SELECT * FROM classement_optimist");
$donnees = mysql_fetch_array($result)
?>
      
    <div id="corps">
           <h1><br></h1>       
           <h5>
		   <div ALIGN=CENTER>
		   Classement des Optimist
		   </div>
		   </h5>
		   <h2><br></h2>
		   <br>
		    <h1><br></h1>       
           <h5>
		   <div ALIGN=CENTER>
<select onchange="afficher(this.value);">
<option selected="selected">Par departement</option>
<option value="1" >Vendée</option>
</select>

<br>
<br>
<select onchange="afficher(this.value);">
<option>Par r&eacute;gion (uniquement pour les ligues et interligues)</option>
<option value="2">Pays de la loire</option>
</select>


		   </div>
		   </h5>
		   <h2><br></h2>
		   <br>
		   <br>
		   
		   <div id="part1" >
		   <h1><br></h1>
		   <h5>
		   <div ALIGN=CENTER>
		  <? echo $donnees['titre'] ?>
		  </div>
		  <br>
	<TABLE BORDER="1", ALIGN=CENTER>
  <TR>
 <TH> Lieux de la régate </TH>
 <TH> Date </TH>
 <TH> Télécharger </TH>
  </TR>
<?php
mysql_connect($sql_serveur, $sql_login, $sql_pass);
mysql_select_db($sql_bdd);
$retour = mysql_query('SELECT * FROM classement_optimist ORDER BY id ASC LIMIT 0, 5') or die(mysql_error());
while ($donnees = mysql_fetch_array($retour))
{
    ?>

  <TR>
 <TD> <? echo $donnees['lieux'] ?> </TD>
 <TD> <? echo $donnees['date'] ?></TD>
 <TD> <? echo $donnees['lien'] ?></TD>
  	<?php
    } // Fin de la boucle de l'agenda
    ?> 
  </TR>
</TABLE> 
	</h5> 
        <h2><br></h2> 		   
       </div>
	   </div>
<div id="part2" style="display:none;">
        test    <!-- Contenu de la partie 2 -->
        </div>

       <!-- Le pied de page -->
 <? require("../../footer.php"); ?>
       <!-- Fin pied page -->
   </body>
</html>


    var nbre_parts = 3; // Entre ici le nombre de parties de ton formulaire
function afficher(numero) {
    var elem_name = "part" + parseInt(numero);
    for(var i=1; i<nbre_parts; i++) {
        var bcl_elem_name = "part" + i;
        document.getElementById(bcl_elem_name).style.display = 'none';
    }
    document.getElementById(elem_name).style.display = 'block';
}


    merci de vos réponse,
    cordialement,
    choco,
    • Partager sur Facebook
    • Partager sur Twitter
    Golmote
    • Javascript
      11 mars 2010 à 19:04:07

      Donne le code HTML généré plutôt que le PHP (clic droit -> Afficher la source).
      • Partager sur Facebook
      • Partager sur Twitter
      chocofusee
        11 mars 2010 à 19:09:41

        voici le code géréré avec les 2 tableaux:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Optimist Brétignollais</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link href="../../css/style.css" title="D&eacute;faut" rel="stylesheet" type="text/css" media="screen" />
	   <script type="text/javascript" src="script.js"></script>
   </head>
 
   <body>

 
       <!-- L'en-tête -->
 
	      <div id="header">
		  </div>
		
		<!-- Barre -->
		<!-- Barre -->

<div id="barre">
<div class="element_barre">
<h1>
<form method="POST" action="ressource/espace_membre/connexion.php" name="connexion">
Nom d'utilisateur :&nbsp;<input name="pseudo" id="pseudo">

&nbsp;Mot de passe :&nbsp;<input name="password" type="password" id="password"> &nbsp;
<input value="Connexion" type="submit"> 
<a href="ressource/espace_membre/pass.php">mot de passe oubli&eacute; ?</a> 
<a href="ressource/espace_membre/inscription.php">s'inscrire</a>
</h1>
</form>
</div>
</div>
		<!-- Fin barre -->
		
	    <!-- Les menus -->

                    <!-- Menu -->
      
	  <div id="menu">        
           <div class="element_menu">
               <h3>Le coin des voilleux</h3>
               <ul>
                   <a href="/index.php">Accueil</a>
				   <br>
				   <a href="vie_site.php">Participer à la vie du site</a>

				   <br>
				   <a href="chat.php">Chatbox</a>
				   <br>
                   <a href="forum/">Forum</a>
				   <br>
                   <a href="contact.php">Contact</a>
               </ul>

           </div>
	           <div class="element_menu">
               <h3>Optimist</h3>
               <ul>
			      <a href="ressource/optimist/info.php">Information</a>
				   <br>
                   <a href="ressource/optimist/calendrier.php">Calendrier</a>

				   <br>
				   <a href="ressource/optimist/classement.php">Classement</a>
				   <br>
                   <a href="ressource/optimist/photo.php">Photo</a>
				   <br>
                   <a href="ressource/optimist/video.php">Vidéo</a>
               </ul>

           </div>   
	        <div class="element_menu">
               <h3>Catamaran</h3>
               <ul>
			      <a href="ressource/catamaran/info.php">Information</a>
				   <br>
                   <a href="ressource/catamaran/calendrier.php">Calendrier</a>
				   <br>

				   <a href="ressource/catamaran/classement.php">Classement</a>
				   <br>
                   <a href="ressource/catamaran/photo.php">Photo</a>
				   <br>
                   <a href="ressource/catamaran/video.php">Vidéo</a>
               </ul>
           </div>   
	      <div class="element_menu">

               <h3>Partenaire</h3>
               <ul>
               </ul>
           </div>   
	   </div>
	   
	    <!--Fin menus -->
		<!-- Social -->
        <div id="social">
<!-- Stats -->

<div class="element_social">
     <h3>Statistique</h3>
     <ul>
          </ul>
</div>
<!-- Fin stats -->
<!-- Twitter -->
<div class="element_social">
	  <h3>Twitter</h3>
<ul>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>
new TWTR.Widget({
  version: 2,
  type: 'faves',
  rpp: 10,
  interval: 6000,
  title: 'L\'actu',
  subject: 'La voile Vendéenne',
  width: 140,
  height: 100,
  theme: {
    shell: {
      background: '#f1f3f3',
      color: '#a6a6a6'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#43c43f'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setUser('voilevendeenne').start();
</script>
</ul>
</div>
<!-- Fin twitter -->

<!-- FaceBook -->
<div class="element_social">
     <h3>FaceBook</h3>
     <ul>
          test
     </ul>
</div>

<!-- Fin FaceBook -->		<!-- Fin social -->
</div>
       <!-- Les classements -->
 		                                            
    <div id="corps">
           <h1><br></h1>       
           <h5>
		   <div ALIGN=CENTER>
		   Classement des Optimist
		   </div>
		   </h5>

		   <h2><br></h2>
		   <br>
		    <h1><br></h1>       
           <h5>
		   <div ALIGN=CENTER>
<select onchange="afficher(this.value);">
<option selected="selected">Par departement</option>
<option value="1" >Vendée</option>
</select>

<br>

<br>
<select onchange="afficher(this.value);">
<option>Par r&eacute;gion (uniquement pour les ligues et interligues)</option>
<option value="2">Pays de la loire</option>
</select>


		   </div>
		   </h5>
		   <h2><br></h2>
		   <br>

		   <br>
		   
		   <div id="part1" >
		   <h1><br></h1>
		   <h5>
		   <div ALIGN=CENTER>
		  test		  </div>
		  <br>
	<TABLE BORDER="1", ALIGN=CENTER>

  <TR>
 <TH> Lieux de la régate </TH>
 <TH> Date </TH>
 <TH> Télécharger </TH>
  </TR>

  <TR>
 <TD> test </TD>
 <TD> test</TD>
 <TD> test</TD>
  	
  <TR>
 <TD> test2 </TD>

 <TD> TEST2</TD>
 <TD> http://test.com</TD>
  	 
  </TR>
</TABLE> 
	</h5> 
        <h2><br></h2> 		   
       </div>
	   </div>
<div id="part2" style="display:none;">

        test    <!-- Contenu de la partie 2 -->
        </div>

       <!-- Le pied de page -->
 <div id="pied_de_page">
           <p>Copyright "Optimist Brétignollais" 2009, tous droits réservés</p>
       </div>       <!-- Fin pied page -->
   </body>

</html>


        avec 1 tableau:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Optimist Brétignollais</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link href="../../css/style.css" title="D&eacute;faut" rel="stylesheet" type="text/css" media="screen" />
	   <script type="text/javascript" src="script.js"></script>
   </head>
 
   <body>

 
       <!-- L'en-tête -->
 
	      <div id="header">
		  </div>
		
		<!-- Barre -->
		<!-- Barre -->

<div id="barre">
<div class="element_barre">
<h1>
<form method="POST" action="ressource/espace_membre/connexion.php" name="connexion">
Nom d'utilisateur :&nbsp;<input name="pseudo" id="pseudo">

&nbsp;Mot de passe :&nbsp;<input name="password" type="password" id="password"> &nbsp;
<input value="Connexion" type="submit"> 
<a href="ressource/espace_membre/pass.php">mot de passe oubli&eacute; ?</a> 
<a href="ressource/espace_membre/inscription.php">s'inscrire</a>
</h1>
</form>
</div>
</div>
		<!-- Fin barre -->
		
	    <!-- Les menus -->

                    <!-- Menu -->
      
	  <div id="menu">        
           <div class="element_menu">
               <h3>Le coin des voilleux</h3>
               <ul>
                   <a href="/index.php">Accueil</a>
				   <br>
				   <a href="vie_site.php">Participer à la vie du site</a>

				   <br>
				   <a href="chat.php">Chatbox</a>
				   <br>
                   <a href="forum/">Forum</a>
				   <br>
                   <a href="contact.php">Contact</a>
               </ul>

           </div>
	           <div class="element_menu">
               <h3>Optimist</h3>
               <ul>
			      <a href="ressource/optimist/info.php">Information</a>
				   <br>
                   <a href="ressource/optimist/calendrier.php">Calendrier</a>

				   <br>
				   <a href="ressource/optimist/classement.php">Classement</a>
				   <br>
                   <a href="ressource/optimist/photo.php">Photo</a>
				   <br>
                   <a href="ressource/optimist/video.php">Vidéo</a>
               </ul>

           </div>   
	        <div class="element_menu">
               <h3>Catamaran</h3>
               <ul>
			      <a href="ressource/catamaran/info.php">Information</a>
				   <br>
                   <a href="ressource/catamaran/calendrier.php">Calendrier</a>
				   <br>

				   <a href="ressource/catamaran/classement.php">Classement</a>
				   <br>
                   <a href="ressource/catamaran/photo.php">Photo</a>
				   <br>
                   <a href="ressource/catamaran/video.php">Vidéo</a>
               </ul>
           </div>   
	      <div class="element_menu">

               <h3>Partenaire</h3>
               <ul>
               </ul>
           </div>   
	   </div>
	   
	    <!--Fin menus -->
		<!-- Social -->
        <div id="social">
<!-- Stats -->

<div class="element_social">
     <h3>Statistique</h3>
     <ul>
          </ul>
</div>
<!-- Fin stats -->
<!-- Twitter -->
<div class="element_social">
	  <h3>Twitter</h3>
<ul>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>
new TWTR.Widget({
  version: 2,
  type: 'faves',
  rpp: 10,
  interval: 6000,
  title: 'L\'actu',
  subject: 'La voile Vendéenne',
  width: 140,
  height: 100,
  theme: {
    shell: {
      background: '#f1f3f3',
      color: '#a6a6a6'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#43c43f'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setUser('voilevendeenne').start();
</script>
</ul>
</div>
<!-- Fin twitter -->

<!-- FaceBook -->
<div class="element_social">
     <h3>FaceBook</h3>
     <ul>
          test
     </ul>
</div>

<!-- Fin FaceBook -->		<!-- Fin social -->
</div>
       <!-- Les classements -->
 		                                            
    <div id="corps">
           <h1><br></h1>       
           <h5>
		   <div ALIGN=CENTER>
		   Classement des Optimist
		   </div>
		   </h5>

		   <h2><br></h2>
		   <br>
		    <h1><br></h1>       
           <h5>
		   <div ALIGN=CENTER>
<select onchange="afficher(this.value);">
<option selected="selected">Par departement</option>
<option value="1" >Vendée</option>
</select>

<br>

<br>
<select onchange="afficher(this.value);">
<option>Par r&eacute;gion (uniquement pour les ligues et interligues)</option>
<option value="2">Pays de la loire</option>
</select>


		   </div>
		   </h5>
		   <h2><br></h2>
		   <br>

		   <br>
		   
		   <div id="part1" >
		   <h1><br></h1>
		   <h5>
		   <div ALIGN=CENTER>
		  test		  </div>
		  <br>
	<TABLE BORDER="1", ALIGN=CENTER>

  <TR>
 <TH> Lieux de la régate </TH>
 <TH> Date </TH>
 <TH> Télécharger </TH>
  </TR>

  <TR>
 <TD> test </TD>
 <TD> test</TD>
 <TD> test</TD>
  	
  <TR>
 <TD> test2 </TD>

 <TD> TEST2</TD>
 <TD> http://test.com</TD>
  	 
  </TR>
</TABLE> 
	</h5> 
        <h2><br></h2> 		   
       </div>
	   </div>
<div id="part2" style="display:none;">

        test    <!-- Contenu de la partie 2 -->
        </div>

       <!-- Le pied de page -->
 <div id="pied_de_page">
           <p>Copyright "Optimist Brétignollais" 2009, tous droits réservés</p>
       </div>       <!-- Fin pied page -->
   </body>

</html>
        • Partager sur Facebook
        • Partager sur Twitter

        liste déroulante

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown