Liste déroulante

VNK6000 · 24 Octobre 2005

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 · 24 Octobre 2005

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:

<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:

<!-- 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 · 24 Octobre 2005

le 1er code je le place ou ?

Fluidex · 24 Octobre 2005

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 · 24 Octobre 2005

Fluidex a dit:
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 · 24 Octobre 2005

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 · 24 Octobre 2005

Lymf a dit:
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:

<!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 · 24 Octobre 2005

et en propre :

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

bonne lecture

c est pas dur à comprendre

Lymf · 24 Octobre 2005

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

donc c'est

Code:

<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)