Liste déroulante [Résolu]

12 messages
Barrette de RAM

Le 21 Novembre 2011 à 12h12

Bonjour,

Je souhaite, faire une liste déroulante.

J'ai les codes suivants :

<html>

<head>

function Lien() { i = document.Choix.Liste.selectedIndex; if (i == 0)

return; url = document.Choix.Liste.options[i].value;

parent.location.href = url;

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<title>Essai</title>

<meta content="Guy" name="author">

</head>

<body style="color: white; background-color: rgb(99, 5, 39);"

alink="#dcd296" link="#dcd296" vlink="#dcd296">

       Année 2010<br>

<form name="Choix">

<select name="Liste" onchange="Lien()">

<option value="">Choisir une option </option>

<option value="2010/Janvier/Vent.html">Janvier</option>

<option value="2010/Février/vent.html">Février</option>

<option value="2010/Mars/vent.html">Mars</option>

</select>

</form>

</body>

</html>]

Et voilà ce que cela me donne pourquoi ?

http://meteoclopiniere.olympe-network.com/Essai.html

Merci de votre aide
Cordialement

andreg

48 messages
Disquette

Le 21 Novembre 2011 à 13h13

Salut,
Je vois dans ton code: function Lien() {
Apparemment, sans bien connaître le langage HTML, je ne vois pas de fermeture de ton accolade ouverte. C'est probablement cette erreur de syntaxe qui te cause un problème.

Guy85

12 messages
Barrette de RAM

Le 21 Novembre 2011 à 16h23

bonjour,
Effectivement,il manque ça entre autre.

Finalment avec ce code, ça fonctionne.

<html>

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<title>essai</title>

<meta content="Guy" name="author">

<script language="JavaScript">

<!--

function Lien() { i = document.Choix.Liste.selectedIndex; if (i == 0)

return; url = document.Choix.Liste.options[i].value;

parent.location.href = url; }

// -->

</script>

</head>

<body style="color: white; background-color: rgb(99, 5, 39);"

alink="#dcd296" link="#dcd296" vlink="#dcd296">

       Année 2010<br>

<form name="Choix">

<select name="Liste" onchange="Lien()">

<option value="">Choisir une option </option>

<option value="2010/Janvier/Vent.html">Janvier</option>

<option value="2010/Fevrier/vent.html">Février</option>

<option value="2010/Mars/vent.html">Mars</option>

</select>

</form>

</body>

</html>

:

Me servir de ce code pour aller chercher mes pages "ok"

Par cotre, je ne sais pas faire la chose suivant :

Faire une liste déroulante liée avec celle là qui contiendrait les années.

Exemple :
Liste 1
1) Année 2010
2) Année 2011

Liste 2
La liste actuelle

Aurais-tu une idée ?

Merci de ton aide
Cordialement

andreg

48 messages
Disquette

Le 21 Novembre 2011 à 19h09

Salut,

Je débute avec le html en suivant une formation gratuite sur le site http://www.siteduzero.com/ avec un fichier PDF assez bien fait 13666-apprenez-a-creer-votre-site-web.pdf dans la catégorie des tutoriels.
J'écrirais donc :

<p>
<label for "Anneechoisie"> Choix de l'année</label><br />
<select name="Anneechoisie" id="Anneechoisie">
<option value="2011"> Année 2011 </option>
<option value="2012"> Année 2011 </option>
</select>
</p>

Guy85

12 messages
Barrette de RAM

Le 22 Novembre 2011 à 16h56

Bonjour,
Merci de ton aide, je regarde ça.

Je reviens, impeccable ça fonctionne.
Mais entre temps, j'ai pensé à ajouter une liste pour la page.
Exemple :
J'ai regardé, mais je n'ai pas trouvé de modèle qui me conviennent (ou je n'ai pas su les adapter).

Dossier 1 --> 210,2011 etc....
Sous dossier --> Les mois
Pages : Graphiques.html, vent.html, Recaps.html, Pression.html...etc

Je souhaiterais avoir 3 listes déroulantes.

Liste 1 : les années
Année 2010
Année 2011
etc....

Liste 2 : Les mois
Janvier
Février
Mars
etc....

Liste 3 : Les pages
Couleur_du_ciel
Graphiques.html
vent.html
Températures.html
Recaps.html
Pression.html
Comment puis-je faire pour, quand je clic sur un nom de la 3ème liste, je puisse avoir la page concernée ?

Voici le nouveau code de ma page :

<html>

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<title>AidoWeb</title>

<meta content="Guy" name="author">

<script language="JavaScript">

<!--

function Lien() { i = document.Choix.Liste.selectedIndex; if (i == 0)

return; url = document.Choix.Liste.options[i].value;

parent.location.href = url; }

// -->

</script>

</head>

<body style="color: white; background-color: rgb(99, 5, 39);"

alink="#dcd296" link="#dcd296" vlink="#dcd296">

<p>

<label for="" anneechoisie=""> Choix de l'année</label><br>

<select name="Anneechoisie" id="Anneechoisie">

<option value="2010"> Année 2010 </option>

<option value="2011"> Année 2011 </option>

</select>

</p>

       Année 2010<br>

<form name="Choix">

<select name="Liste" onchange="Lien()">

<option value="">Choisir une option </option>

<option value="2010/Janvier/Vent.html">Janvier</option>

<option value="2010/Fevrier/vent.html">Février</option>

<option value="2011/Mars/vent.html">Mars</option>

</select>

</form>

</body>

</html>

Et voici le lien de la page :
http://meteoclopiniere.olympe-network.com/Essai4.html

Merci de votre aide, cela m'arrangerais bien.
Cordialement

ju2cho7

7322 messages
No-Life
No-Life

AidoCodeur

Modérateur

Le 24 Novembre 2011 à 18h35

Tu peux concaténer des chaînes de caractères en javascript, grâce à l'opérateur + Clin d'oeil
Dans ton cas, il faudrait déjà enlever le "2010" et le nom de le page html de tes url, et définir ta variable url comme ceci:



<html>

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<title>AidoWeb</title>

<meta content="Guy" name="author">

<script language="JavaScript">

<!--

function Lien() {

var el, url;

el = document.getElementById('Annee');  //On récupère l'élément Annee

if (el.selectedIndex == 0) return;

url=el.options[el.selectedIndex]; // On stocke l'année choisie au début de l'url



el = "/" + document.getElementById('Mois') + "/"; // On récupère l'élément Mois encadré par des /

if (el.selectedIndex == 0) return;

url += el.options[el.selectedIndex]; // On stocke le mois choisi dans l'url



el = document.getElementById('Page'); // On récupère l'élément Page

if (el.selectedIndex == 0) return;

url += el.options[el.selectedIndex] + ".html"; //On stocke la page choisie dans l'url suivie de .html



// On a au final une url de type 2010/fevrier/vent.html



parent.location.href = url;

}

// -->

</script>

</head>

<body style="color: white; background-color: rgb(99, 5, 39);"

alink="#dcd296" link="#dcd296" vlink="#dcd296">

<p>

<label for="Annee" >Choix de l'année</label>

<select id="Annee">

<option>Choisir une option </option>

<option value="2010"> Année 2010 </option>

<option value="2011"> Année 2011 </option>

</select>

</p>

<p>

<select id="Mois">

<option>Choisir une option </option>

<option value="janvier">Janvier</option>

<option value="fevrier">Février</option>

<option value="mars">Mars</option>

</select>

</p>

<p>

<select id="Page" onchange="Lien()">

<option>Choisir une option </option>

<option value="vent">Vent</option>

<option value="pluie">Pluie</option>

<option value="temperature">Température</option>

</select>

</p>

</body>

</html>

Je n'ai pas testé le code, mais visiblement c'est quelque chose du genre.

Petite remarque (pas méchante, juste très utiles quand on code): pense à adopter des bonnes habitudes, comme par exemple toujours structurer ton code de la même manière, ici par exemple la balise <p>. Soit tu en mets une, à chaque liste, soit tu n'en mets aucune, mais ça permet d'avoir un code beaucoup plus propre et lisible. Clin d'oeil

Guy85

12 messages
Barrette de RAM

Le 24 Novembre 2011 à 19h49

Bonsoir.
Pour l'instant, ça ne fonctionne pas, mais ça correspond exactement à ce que je souhaite.
J'essaye de voir ce qui ne va pas.

Quand aux remarques, pas de problème, ells sont les bien venues.
Cordialement

Guy85

12 messages
Barrette de RAM

Le 24 Novembre 2011 à 20h09

Désolé, je n'arrive pas à voir ce qui ne va pas .
La page n'apparaît pas.

ju2cho7

7322 messages
No-Life
No-Life

AidoCodeur

Modérateur

Le 28 Novembre 2011 à 22h32

Tu aurais un lien, pour nous montrer le résultat ?

Guy85

12 messages
Barrette de RAM

Le 02 Décembre 2011 à 10h12

Bonjour,
Ça y est, j'ai trouvé !!!!

Code

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Listes Guy</title>
<meta content="Guy" name="author">
<script type="text/javascript">

</script>
</head>
<body style="color: white; background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<br>

<select id="annee" name="annee" size="1">
<option value="">Choisir une Année</option>
<option value="2011">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
</select>

<select id="mois" name="mois" size="1">
<option value="">Choisir un mois</option>
<option value="">Janvier</option>
<option value="">Fevrier</option>
<option value="">Mars</option>
<option value="">Avril</option>
<option value="">Mai</option>
<option value="">Juin</option>
<option value="">Juillet</option>
<option value="">Aout</option>
<option value="">Septembre</option>
<option value="">Octobre</option>
<option value="">Novembre</option>
<option value="">Decembre</option>
</select>

<select id="pages" name="pages" size="1" onchange="onChange();">
<option value="">Choisir une page</option>
<option value="">Couleur_du_ciel</option>
<option value="">Graphiques</option>
<option value="">Pressions</option>
<option value="">Vent</option>
<option value="">Recaps</option>
</select>
</body>
</html>

ju2cho7

7322 messages
No-Life
No-Life

AidoCodeur

Modérateur

Le 04 Décembre 2011 à 20h29

Si tu mets des value="" vides, autant ne pas les mettre
Et petite astuce, au lieu de mettre <option value="">Couleur_du_ciel</option> qui n'est pas très agréable au rendu, tu peux choisir plutôt <option value="Couleur_du_ciel">Couleur du ciel</option> qui sera nettement plus user-friendly Clin d'oeil

PS: de rien: )

	Informations	Messages
Guy85 12 messages Barrette de RAM		Le 21 Novembre 2011 à 12h12 Bonjour, Je souhaite, faire une liste déroulante. J'ai les codes suivants : <html> <head> function Lien() { i = document.Choix.Liste.selectedIndex; if (i == 0) return; url = document.Choix.Liste.options[i].value; parent.location.href = url; <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Essai</title> <meta content="Guy" name="author"> </head> <body style="color: white; background-color: rgb(99, 5, 39);" alink="#dcd296" link="#dcd296" vlink="#dcd296"> Année 2010<br> <form name="Choix"> <select name="Liste" onchange="Lien()"> <option value="">Choisir une option </option> <option value="2010/Janvier/Vent.html">Janvier</option> <option value="2010/Février/vent.html">Février</option> <option value="2010/Mars/vent.html">Mars</option> </select> </form> </body> </html>] Et voilà ce que cela me donne pourquoi ? http://meteoclopiniere.olympe-network.com/Essai.html Merci de votre aide Cordialement


andreg 48 messages Disquette		Le 21 Novembre 2011 à 13h13 Salut, Je vois dans ton code: function Lien() { Apparemment, sans bien connaître le langage HTML, je ne vois pas de fermeture de ton accolade ouverte. C'est probablement cette erreur de syntaxe qui te cause un problème.


Guy85 12 messages Barrette de RAM		Le 21 Novembre 2011 à 16h23 bonjour, Effectivement,il manque ça entre autre. Finalment avec ce code, ça fonctionne. <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>essai</title> <meta content="Guy" name="author"> <script language="JavaScript"> <!-- function Lien() { i = document.Choix.Liste.selectedIndex; if (i == 0) return; url = document.Choix.Liste.options[i].value; parent.location.href = url; } // --> </script> </head> <body style="color: white; background-color: rgb(99, 5, 39);" alink="#dcd296" link="#dcd296" vlink="#dcd296"> Année 2010<br> <form name="Choix"> <select name="Liste" onchange="Lien()"> <option value="">Choisir une option </option> <option value="2010/Janvier/Vent.html">Janvier</option> <option value="2010/Fevrier/vent.html">Février</option> <option value="2010/Mars/vent.html">Mars</option> </select> </form> </body> </html> : Me servir de ce code pour aller chercher mes pages "ok" Par cotre, je ne sais pas faire la chose suivant : Faire une liste déroulante liée avec celle là qui contiendrait les années. Exemple : Liste 1 1) Année 2010 2) Année 2011 Liste 2 La liste actuelle Aurais-tu une idée ? Merci de ton aide Cordialement


andreg 48 messages Disquette		Le 21 Novembre 2011 à 19h09 Salut, Je débute avec le html en suivant une formation gratuite sur le site http://www.siteduzero.com/ avec un fichier PDF assez bien fait 13666-apprenez-a-creer-votre-site-web.pdf dans la catégorie des tutoriels. J'écrirais donc : <p> <label for "Anneechoisie"> Choix de l'année</label><br /> <select name="Anneechoisie" id="Anneechoisie"> <option value="2011"> Année 2011 </option> <option value="2012"> Année 2011 </option> </select> </p>


Guy85 12 messages Barrette de RAM		Le 22 Novembre 2011 à 16h56 Bonjour, Merci de ton aide, je regarde ça. Je reviens, impeccable ça fonctionne. Mais entre temps, j'ai pensé à ajouter une liste pour la page. Exemple : J'ai regardé, mais je n'ai pas trouvé de modèle qui me conviennent (ou je n'ai pas su les adapter). Dossier 1 --> 210,2011 etc.... Sous dossier --> Les mois Pages : Graphiques.html, vent.html, Recaps.html, Pression.html...etc Je souhaiterais avoir 3 listes déroulantes. Liste 1 : les années Année 2010 Année 2011 etc.... Liste 2 : Les mois Janvier Février Mars etc.... Liste 3 : Les pages Couleur_du_ciel Graphiques.html vent.html Températures.html Recaps.html Pression.html Comment puis-je faire pour, quand je clic sur un nom de la 3ème liste, je puisse avoir la page concernée ? Voici le nouveau code de ma page : <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>AidoWeb</title> <meta content="Guy" name="author"> <script language="JavaScript"> <!-- function Lien() { i = document.Choix.Liste.selectedIndex; if (i == 0) return; url = document.Choix.Liste.options[i].value; parent.location.href = url; } // --> </script> </head> <body style="color: white; background-color: rgb(99, 5, 39);" alink="#dcd296" link="#dcd296" vlink="#dcd296"> <p> <label for="" anneechoisie=""> Choix de l'année</label><br> <select name="Anneechoisie" id="Anneechoisie"> <option value="2010"> Année 2010 </option> <option value="2011"> Année 2011 </option> </select> </p> Année 2010<br> <form name="Choix"> <select name="Liste" onchange="Lien()"> <option value="">Choisir une option </option> <option value="2010/Janvier/Vent.html">Janvier</option> <option value="2010/Fevrier/vent.html">Février</option> <option value="2011/Mars/vent.html">Mars</option> </select> </form> </body> </html> Et voici le lien de la page : http://meteoclopiniere.olympe-network.com/Essai4.html Merci de votre aide, cela m'arrangerais bien. Cordialement


ju2cho7 7322 messages No-Life AidoCodeur Modérateur		Le 24 Novembre 2011 à 18h35 Tu peux concaténer des chaînes de caractères en javascript, grâce à l'opérateur + Dans ton cas, il faudrait déjà enlever le "2010" et le nom de le page html de tes url, et définir ta variable url comme ceci: <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>AidoWeb</title> <meta content="Guy" name="author"> <script language="JavaScript"> <!-- function Lien() { var el, url; el = document.getElementById('Annee'); //On récupère l'élément Annee if (el.selectedIndex == 0) return; url=el.options[el.selectedIndex]; // On stocke l'année choisie au début de l'url el = "/" + document.getElementById('Mois') + "/"; // On récupère l'élément Mois encadré par des / if (el.selectedIndex == 0) return; url += el.options[el.selectedIndex]; // On stocke le mois choisi dans l'url el = document.getElementById('Page'); // On récupère l'élément Page if (el.selectedIndex == 0) return; url += el.options[el.selectedIndex] + ".html"; //On stocke la page choisie dans l'url suivie de .html // On a au final une url de type 2010/fevrier/vent.html parent.location.href = url; } // --> </script> </head> <body style="color: white; background-color: rgb(99, 5, 39);" alink="#dcd296" link="#dcd296" vlink="#dcd296"> <p> <label for="Annee" >Choix de l'année</label> <select id="Annee"> <option>Choisir une option </option> <option value="2010"> Année 2010 </option> <option value="2011"> Année 2011 </option> </select> </p> <p> <select id="Mois"> <option>Choisir une option </option> <option value="janvier">Janvier</option> <option value="fevrier">Février</option> <option value="mars">Mars</option> </select> </p> <p> <select id="Page" onchange="Lien()"> <option>Choisir une option </option> <option value="vent">Vent</option> <option value="pluie">Pluie</option> <option value="temperature">Température</option> </select> </p> </body> </html> Je n'ai pas testé le code, mais visiblement c'est quelque chose du genre. Petite remarque (pas méchante, juste très utiles quand on code): pense à adopter des bonnes habitudes, comme par exemple toujours structurer ton code de la même manière, ici par exemple la balise <p>. Soit tu en mets une, à chaque liste, soit tu n'en mets aucune, mais ça permet d'avoir un code beaucoup plus propre et lisible.
		Nous ne fournissons pas d'aide par MP. ;)

Guy85 12 messages Barrette de RAM		Le 24 Novembre 2011 à 19h49 Bonsoir. Pour l'instant, ça ne fonctionne pas, mais ça correspond exactement à ce que je souhaite. J'essaye de voir ce qui ne va pas. Quand aux remarques, pas de problème, ells sont les bien venues. Cordialement


Guy85 12 messages Barrette de RAM		Le 24 Novembre 2011 à 20h09 Désolé, je n'arrive pas à voir ce qui ne va pas . La page n'apparaît pas.


ju2cho7 7322 messages No-Life AidoCodeur Modérateur		Le 28 Novembre 2011 à 22h32 Tu aurais un lien, pour nous montrer le résultat ?
		Nous ne fournissons pas d'aide par MP. ;)

Guy85 12 messages Barrette de RAM		Le 02 Décembre 2011 à 10h12 Bonjour, Ça y est, j'ai trouvé !!!! Code <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Listes Guy</title> <meta content="Guy" name="author"> <script type="text/javascript"> <!-- function onChange() { var index_annee = document.getElementById('annee').selectedIndex; var annee = document.getElementById('annee').options[index_annee].text; var mois = document.getElementById('mois').options[document.getElementById('mois').selectedIndex].text; var pages = document.getElementById('pages').options[document.getElementById('pages').selectedIndex].text; var url = annee + '/' + mois + '/' + pages +'.html'; window.location=url; } //--> </script> </head> <body style="color: white; background-color: rgb(99, 5, 39);" alink="#dcd296" link="#dcd296" vlink="#dcd296"> <br> <!-- liste déroulante pour les années --> <select id="annee" name="annee" size="1"> <option value="">Choisir une Année</option> <option value="2011">2011</option> <option value="">2010</option> <option value="">2009</option> <option value="">2008</option> </select> <!-- liste déroulantes pour les mois --> <select id="mois" name="mois" size="1"> <option value="">Choisir un mois</option> <option value="">Janvier</option> <option value="">Fevrier</option> <option value="">Mars</option> <option value="">Avril</option> <option value="">Mai</option> <option value="">Juin</option> <option value="">Juillet</option> <option value="">Aout</option> <option value="">Septembre</option> <option value="">Octobre</option> <option value="">Novembre</option> <option value="">Decembre</option> </select> <!-- liste déroulante pour les pages --> <select id="pages" name="pages" size="1" onchange="onChange();"> <option value="">Choisir une page</option> <option value="">Couleur_du_ciel</option> <option value="">Graphiques</option> <option value="">Pressions</option> <option value="">Vent</option> <option value="">Recaps</option> </select> </body> </html>


ju2cho7 7322 messages No-Life AidoCodeur Modérateur		Le 04 Décembre 2011 à 20h29 Si tu mets des value="" vides, autant ne pas les mettre Et petite astuce, au lieu de mettre <option value="">Couleur_du_ciel</option> qui n'est pas très agréable au rendu, tu peux choisir plutôt <option value="Couleur_du_ciel">Couleur du ciel</option> qui sera nettement plus user-friendly PS: de rien: )
		Nous ne fournissons pas d'aide par MP. ;)