| |
|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
VNK6000
Nouveau WRInaute
Inscrit le: 24 Oct 2005
Messages: 7
|
 Posté le : Lun Oct 24, 2005 10:27 Sujet du message: Liste déroulante |
|
|
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
WRInaute occasionnel
Inscrit le: 12 Mai 2005
Messages: 188
Localisation: bxl.be
|
| Posté le : Lun Oct 24, 2005 10:56 Sujet du message: Liste déroulante |
|
|
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
Nouveau WRInaute
Inscrit le: 24 Oct 2005
Messages: 7
|
| Posté le : Lun Oct 24, 2005 11:02 Sujet du message: Liste déroulante |
|
|
| le 1er code je le place ou ? |
|
| |
|
|
Fluidex
WRInaute discret
Inscrit le: 17 Juil 2004
Messages: 83
Localisation: Paris
|
| Posté le : Lun Oct 24, 2005 11:06 Sujet du message: Liste déroulante |
|
|
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
Nouveau WRInaute
Inscrit le: 24 Oct 2005
Messages: 7
|
| Posté le : Lun Oct 24, 2005 11:14 Sujet du message: Liste déroulante |
|
|
| Fluidex a écrit: |
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
WRInaute occasionnel
Inscrit le: 12 Mai 2005
Messages: 188
Localisation: bxl.be
|
| Posté le : Lun Oct 24, 2005 11:18 Sujet du message: Liste déroulante |
|
|
| 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
Nouveau WRInaute
Inscrit le: 24 Oct 2005
Messages: 7
|
| Posté le : Lun Oct 24, 2005 11:23 Sujet du message: Liste déroulante |
|
|
| Lymf a écrit: |
| 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
Modérateur
Inscrit le: 23 Déc 2003
Messages: 12252
Localisation: Toulouse
|
|
| |
|
|
Lymf
WRInaute occasionnel
Inscrit le: 12 Mai 2005
Messages: 188
Localisation: bxl.be
|
| Posté le : Lun Oct 24, 2005 11:29 Sujet du message: Liste déroulante |
|
|
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) |
|
| |
|
|
| |
|
|
|
|
Autres sujets de discussion :
Définitions :
|
|
