Liste déroulante

[VNK6000]

Salut à tous

Bon alors voila mon problème je suis en train de coder un site et il y a un truc ou je bloque
Je voudrais lister 3 pays : France, Belgique, Suisse dans une liste déroulante.

Et je voudrais liser chaque régions de chaque pays

Alors comment faire pour que si on selectionne dans la liste France dans la 2eme liste déroulante qui se trouve en dessous apparaisse les régions de france mais par contre si on prend la Suisse alors c'est les régions de suisse.

J'espere m'avoir fait comprendre.

merci de votre aide.

[Lymf]

vala un petit script que tu peux modifier, pas le temps de commenter plus...
j'avais trouvé ca qqpart et modifié pour mes besoins.

Code: Tout sélectionner

<script language="JavaScript">
// Détection du navigateur
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Tableaux des valeurs pour chaque item de la première liste
// Chaque élément est en deux partie :
// Le texte, un séparateur (£), la valeur

var opt_0 = new Array('_____________ £');
var opt_1 = new Array('14h00 £2005-10-29 14:00:00',
                 '15h00 £2005-10-29 15:00:00',
                 '16h00 £2005-10-29 16:00:00',
                 '17h00 £2005-10-29 17:00:00',
                 '18h00 £2005-10-29 18:00:00',
                 '19h00 £2005-10-29 19:00:00',
                 '20h00 £2005-10-29 20:00:00',
                 '21h00 £2005-10-29 21:00:00',
                 '22h00 £2005-10-29 22:00:00');
                
var opt_2 = new Array('8h00 £2005-10-30 08:00:00',
                 '9h00 £2005-10-30 09:00:00',
                 '10h00 £2005-10-30 10:00:00',
                 '11h00 £2005-10-30 11:00:00',
                 '12h00 £2005-10-30 12:00:00',
                 '13h00 £2005-10-30 13:00:00',
                 '14h00 £2005-10-30 14:00:00',
                 '15h00 £2005-10-30 15:00:00',
                 '16h00 £2005-10-30 16:00:00',
                 '17h00 £2005-10-30 17:00:00',
                 '18h00 £2005-10-30 18:00:00',
                 '19h00 £2005-10-30 19:00:00',
                 '20h00 £2005-10-30 20:00:00',
                 '21h00 £2005-10-30 21:00:00',
                 '22h00 £2005-10-30 22:00:00');
                
var opt_3 = new Array('8h00 £2005-10-31 08:00:00',
                 '9h00 £2005-10-31 09:00:00',
                 '10h00 £2005-10-31 10:00:00',
                 '11h00 £2005-10-31 11:00:00',
                 '12h00 £2005-10-31 12:00:00',
                 '13h00 £2005-10-31 13:00:00',
                 '14h00 £2005-10-31 14:00:00',
                 '15h00 £2005-10-31 15:00:00',
                 '16h00 £2005-10-31 16:00:00',
                 '17h00 £2005-10-31 17:00:00',
                 '18h00 £2005-10-31 18:00:00',
                 '19h00 £2005-10-31 19:00:00',
                 '20h00 £2005-10-31 20:00:00');

// Fonction avec nom du formulaire, de la première et de la seconde liste en paramètres
function populate(form,select1,select2) {

   // Création de raccourcis pour manipuler les listes
   var origine = 'document.' + form + '.' + select1;
   var resultat = 'document.' + form + '.' + select2;

   // Si un item est sélectionné (sauf le premier, vide)
   if ( eval(origine + '.options[' + origine + '.selectedIndex]').value != '' ) {
      // Séparation de la valeur de l'item toutes les ',' en 2 éléments
      var contenu = eval(origine + '.options[' + origine + '.selectedIndex]').value.split(",");

      // Si on trouve un zéro, on prendra tous les éléments
      if ( contenu[1] == 0 ) {
         longueur = eval('opt_' + contenu[0]).length;
      }

      // Sinon...
      else {
         // on prend le nombre trouvé
         longueur = contenu[1];
      }   

      // Effacement de la liste d'arrivée (au cas où elle contienne déjà des éléments)
      eval(resultat).length = 0;

      // Pour chaque élément du tableau voulu
      for ( i = 0; i < longueur; i++ ) {
   
         // Séparation tous les '£' pour obtenir les textes et les valeurs
         var valeur = eval('opt_' + contenu[0])[i].split("£");

         // Affectation à la liste d'arrivée
         eval(resultat).options[i] = new Option(valeur[0], valeur[1]);
      }

      // Instruction spécifique à Netscape 4.x
      if (nc4) {

         // Sélection du premier item de la liste d'arrivée
         eval(resultat).options.selectedIndex = 0;

         // Rechargement de la page pour voir apparaître les nouvelles valeurs
         history.go(0);
      }
   }
}

et dans le form:

Code: Tout sélectionner

<!-- premiere liste -->
<select name="jour_a" OnChange="populate('subscribe','jour_a','heure_a');">
            <option value="0,0" selected="selected"></option>
            <option value="1,0">29/10</option>
            <option value="2,0">30/10</option>
            <option value="3,0">31/10</option>
      </select>
<!-- deuxieme liste -->
      <select name="heure_a">
         <option value="">_____________</option>
      </select>

[VNK6000]

le 1er code je le place ou ?

[Fluidex]

Avec Javascript, si tu en acceptes l'usage :
1/ mettre les régions par pays dans des <div> (une <div> par pays bien sur) avec la propriété display:none.
2/ javascript qui à la sélection dans la liste déroulante modifie la propriété en display:block

Si tu veux plus accessible (sans javascript) il faut 2 formulaires sur 2 pages différentes avec un aller-retour par le serveur : après le choix du pays dans le premier formulaire, le serveur renvoie le second formulaire avec la bonne liste de régions.

[VNK6000]

Avec Javascript, si tu en acceptes l'usage :
1/ mettre les régions par pays dans des <div> (une <div> par pays bien sur) avec la propriété display:none.
2/ javascript qui à la sélection dans la liste déroulante modifie la propriété en display:block

Si tu veux plus accessible (sans javascript) il faut 2 formulaires sur 2 pages différentes avec un aller-retour par le serveur : après le choix du pays dans le premier formulaire, le serveur renvoie le second formulaire avec la bonne liste de régions.

Je veux bien le faire mais moi pauvre débutant je n'y comprend pas grand chose

Je prefererais avec javascript si possible mais sans pourrait faire l'affaire du moment que ca marche

Merci d'avance

[Lymf]

le code javascript se place dans la balise <head></head>, en général à la fin (après le <title> et les différents <meta />).

[VNK6000]

le code javascript se place dans la balise <head></head>, en général à la fin (après le <title> et les différents <meta />).

Je viens de mettre :

Code: Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<script language="JavaScript">
// Détection du navigateur
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Tableaux des valeurs pour chaque item de la première liste
// Chaque élément est en deux partie :
// Le texte, un séparateur (£), la valeur

var opt_0 = new Array('_____________ £');
var opt_1 = new Array('14h00 £2005-10-29 14:00:00',
                 '15h00 £2005-10-29 15:00:00',
                 '16h00 £2005-10-29 16:00:00',
                 '17h00 £2005-10-29 17:00:00',
                 '18h00 £2005-10-29 18:00:00',
                 '19h00 £2005-10-29 19:00:00',
                 '20h00 £2005-10-29 20:00:00',
                 '21h00 £2005-10-29 21:00:00',
                 '22h00 £2005-10-29 22:00:00');
               
var opt_2 = new Array('8h00 £2005-10-30 08:00:00',
                 '9h00 £2005-10-30 09:00:00',
                 '10h00 £2005-10-30 10:00:00',
                 '11h00 £2005-10-30 11:00:00',
                 '12h00 £2005-10-30 12:00:00',
                 '13h00 £2005-10-30 13:00:00',
                 '14h00 £2005-10-30 14:00:00',
                 '15h00 £2005-10-30 15:00:00',
                 '16h00 £2005-10-30 16:00:00',
                 '17h00 £2005-10-30 17:00:00',
                 '18h00 £2005-10-30 18:00:00',
                 '19h00 £2005-10-30 19:00:00',
                 '20h00 £2005-10-30 20:00:00',
                 '21h00 £2005-10-30 21:00:00',
                 '22h00 £2005-10-30 22:00:00');
               
var opt_3 = new Array('8h00 £2005-10-31 08:00:00',
                 '9h00 £2005-10-31 09:00:00',
                 '10h00 £2005-10-31 10:00:00',
                 '11h00 £2005-10-31 11:00:00',
                 '12h00 £2005-10-31 12:00:00',
                 '13h00 £2005-10-31 13:00:00',
                 '14h00 £2005-10-31 14:00:00',
                 '15h00 £2005-10-31 15:00:00',
                 '16h00 £2005-10-31 16:00:00',
                 '17h00 £2005-10-31 17:00:00',
                 '18h00 £2005-10-31 18:00:00',
                 '19h00 £2005-10-31 19:00:00',
                 '20h00 £2005-10-31 20:00:00');

// Fonction avec nom du formulaire, de la première et de la seconde liste en paramètres
function populate(form,select1,select2) {

   // Création de raccourcis pour manipuler les listes
   var origine = 'document.' + form + '.' + select1;
   var resultat = 'document.' + form + '.' + select2;

   // Si un item est sélectionné (sauf le premier, vide)
   if ( eval(origine + '.options[' + origine + '.selectedIndex]').value != '' ) {
      // Séparation de la valeur de l'item toutes les ',' en 2 éléments
      var contenu = eval(origine + '.options[' + origine + '.selectedIndex]').value.split(",");

      // Si on trouve un zéro, on prendra tous les éléments
      if ( contenu[1] == 0 ) {
         longueur = eval('opt_' + contenu[0]).length;
      }

      // Sinon...
      else {
         // on prend le nombre trouvé
         longueur = contenu[1];
      }   

      // Effacement de la liste d'arrivée (au cas où elle contienne déjà des éléments)
      eval(resultat).length = 0;

      // Pour chaque élément du tableau voulu
      for ( i = 0; i < longueur; i++ ) {
   
         // Séparation tous les '£' pour obtenir les textes et les valeurs
         var valeur = eval('opt_' + contenu[0])[i].split("£");

         // Affectation à la liste d'arrivée
         eval(resultat).options[i] = new Option(valeur[0], valeur[1]);
      }

      // Instruction spécifique à Netscape 4.x
      if (nc4) {

         // Sélection du premier item de la liste d'arrivée
         eval(resultat).options.selectedIndex = 0;

         // Rechargement de la page pour voir apparaître les nouvelles valeurs
         history.go(0);
      }
   }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<select name="jour_a" OnChange="populate('subscribe','jour_a','heure_a');">
            <option value="0,0" selected="selected"></option>
            <option value="1,0">29/10</option>
            <option value="2,0">30/10</option>
            <option value="3,0">31/10</option>
      </select>
      <select name="heure_a">
         <option value="">_____________</option>
      </select>
</form>
</body>
</html>

Et cela ne marche pas

Merci

[e-kiwi]

et en propre :

http://www.openweb.eu.org/articles/obje ... tprequest/

bonne lecture c est pas dur à comprendre

[Lymf]

pardon, dans mon script j'ai oublié les balises <form>

donc c'est

Code: Tout sélectionner

<form name="subscribe" action="page.php" method="post">
<select name="jour_a" OnChange="populate('subscribe','jour_a','heure_a');">
            <option value="0,0" selected="selected"></option>
            <option value="1,0">29/10</option>
            <option value="2,0">30/10</option>
            <option value="3,0">31/10</option>
      </select>
      <select name="heure_a">
         <option value="">_____________</option>
      </select>
</form>

sinon, tu pourras peut-etre trouver une solution sur le lien donné par je ne sasi plus qui juste lemessage avant... il est assez bien fait (je l'ai parcourru rapidement)