Liste déroulante

PoppyGuy · Message par **PoppyGuy** » 20 nov. 2011, 21:10

Bonsoir,

J'essaye de faire une liste déroulante liée avec une autre.
J'ai trouvé un modèle, mais ça na fonctionne pas.

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

voici le code:

Code : Tout sélectionner

<html>
<head>
<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">
<select name="Rubrique" onchange="Choix(this.form)">
<option>-- Choisissez une Année ---</option>
<option>2010</option>
<option>2011</option>
<option>En attente</option>
</select>
<select name="Page">
<option>-- Choisissez un mois ---</option>
<option></option>
<option></option>
<option></option>
</select>
</body>
</html>

1ère liste "Choisir l'année"
2ème liste "Choisir le mois"

Et comment faire un lien avec la page d'un mois ?

Peut être que cela n'a rien à voir avec "Kompozer"
Si oui, merci de votre aide.
Si non, excusez du dérangement
merci quand même de votre aide.

Cordialement
Guy

Teraoctet · Message par **Teraoctet** » 20 nov. 2011, 21:21

Bonsoir Guy
il te manque le bouton 'Aller' à droite de tes 2 listes
Ensuite complète le code avec la liste des mois, en même temps tu crées un lien ver la page du mois et ainsi de suite pour chaque mois, logiquement un click sur le bouton, et la page s'ouvrira avec la bonne année et le bon mois

PoppyGuy · Message par **PoppyGuy** » 21 nov. 2011, 00:17

Bonjour Teraoctet
Je ne vois pas ce que tu veut dire par bouton à droite .
J'ai bien mis les mois
Je ne vois pas comment établir un lien.

Teraoctet · Message par **Teraoctet** » 21 nov. 2011, 00:33

Bonsoir Guy, à droite de tes 2 menus déroulant il te faut un lien pour faire fonctionner l'ensemble des 2 listes déroulantes, c'est à dire que le lien permettant d'aller sur le choix de l'internaute doit être significatif sous la forme d'un bouton. Schématiquement côte à côte: Liste1+ Liste2 + Bouton dont le nom sera(Rechercher ou aller etc...)
En résumé comment celui qui à choisi l'année et le mois peut il aller sur la page correspondante?... Par un lien sous forme d'un bouton

PoppyGuy · Message par **PoppyGuy** » 21 nov. 2011, 11:56

Bonjour,
J'avoue que je ne comprends pas, pour moi, je pensais que cliquer sur le mois suffi à aller à la page

En plus simple :
1) Je saisie le texte "Année 2010".
2) En dessous je mets un liste déroulante.
3) Quand je clic sur la flèche de droite, je développe la liste.
4) Je clic sur le mois et il faut que j'otienne la page.

Voilà ce que j'obtiens : (pas térible)
http://meteoclopiniere.olympe-network.com/Essai.html

Voici le modèle que j'ai pris : (mon souhait)
http://www.thelin.net/laurent/labo/js/l ... antes.html

Message par **chinon37** » 21 nov. 2011, 12:12

dans ton code, tu as effacé la balise fermante </head> ce qui met le bazar! essaie déjà en remettant cette balise à sa place!

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  <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">
function Lien() {
	i = document.Choix.Liste.selectedIndex;
	if (i == 0) return;
	url = document.Choix.Liste.options[i].value;
	parent.location.href = url;
}
</head>
Année 2010<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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>

Je n'ai pas testé.... mais....

PoppyGuy · Message par **PoppyGuy** » 21 nov. 2011, 12:45

Bonjour Chinon37

Quand je mets en "Conception", j'ai ce texte que je vois sur la page :

function Lien() { i = document.Choix.Liste.selectedIndex; if (i == 0) return; url = document.Choix.Liste.options.value; parent.location.href = url; }

Message par **chinon37** » 21 nov. 2011, 13:49

exact, j'ai répondu trop rapidement: le </head> n'est pas au bon endroit. Il doit être après le javascript. et il faut indiquer qu'il s'agit d'un script javascript!!

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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>

PoppyGuy · Message par **PoppyGuy** » 21 nov. 2011, 15:10

Bonjour,
Impeccable !!!
Donc avec le code suivant, ça devrais bien arriver à fonctionner ?

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Essai 2</title>
<meta content="Guy" name="author">
<script language="JavaScript"></script><!--
function Choix(form) {
i = form.Rubrique.selectedIndex;
if (i == 0) { return; }
switch (i) {
case 1 : var txt = new Array ('Janvier','Fevrier', 'Mars'); break;
case 2 : var txt = new Array ('Janvier','Fevrier', 'Mars'); break;
case 3 : var txt = new Array ('Janvier','Fevrier', 'Mars'); break;
}
form.Rubrique.selectedIndex = 0;
for (i=0;i<3;i++) { form.Page.options[i+1].text=txt[i]; }
}
// -->
</head>
<body style="color: white; background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<br>
<select name="Rubrique" onchange="Choix(this.form)">
<option>-- Choisissez une Année ---</option>
<option>2010</option>
<option>2011</option>
<option>En attente</option>
</select>
<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>
</body>
</html>

Merci de ton aide
Cordialement

Message par **Ymai** » 21 nov. 2011, 19:40

[edit]Désolé d'avoir l'air d'un grand méchant dans ce que j'écris. Ce n'est pas mon propos.
La programmation est une discipline ardue et qui ne pardonne pas l'erreur. Une virgule mal placée et vous perdez quelques millions de dollars (http://fr.wikipedia.org/wiki/Mars_Climate_Orbiter ). C'est un leurre de croire que quelques lignes de code recopiées rapidement vont faire ce que l'on veut, sans sourciller. Il faut plutôt partir de l'idée que si quelque chose peut tourner mal, cela tournera mal: principe numéro 1.
Il faudrait que quelqu'un prenne un peu de temps pour rendre à ces lignes de code un aspect humain; Et là, maintenant, je ne l'ai pas... À mon grand dam.[/edit]
[edit2]Ne faudrait-il pas déplacer la question sur "Développement web"[/edit2]

Bonjour
Sans vouloir décourager quiconque, je vois au moins plusieurs problèmes:

La balise qui début un script Javascript devrait être

Code : Tout sélectionner

<script type="text/javascript">

La balise fermante

Code : Tout sélectionner

</script>

devrait se trouver derrière les définitions des fonctions et procédures. Ici, juste avant </head>.

La ligne

Code : Tout sélectionner

for (i=0;i<3;i++)

devrait, au moins, s'écrire

Code : Tout sélectionner

for (i=0;i<3;i++)

pour avoir du sens.

La ligne

Code : Tout sélectionner

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

indique que lorsque le contenu de la "Liste" change, on fait appel à la procédure "Lien()". Mais cette procédure n'est définie nulle part...

Les lignes

Code : Tout sélectionner

    switch (i) {
    case 1 : var txt = new Array ('Janvier','Fevrier', 'Mars'); break;
    case 2 : var txt = new Array ('Janvier','Fevrier', 'Mars'); break;
    case 3 : var txt = new Array ('Janvier','Fevrier', 'Mars'); break;
    }

disent ce qu'il faut faire en fonction de la valeur de la variable "i".
Mais, dans tous les cas, c'est la même action qui est décrite... Pile je gagne, face je gagne, sur la tranche, je gagne aussi.

Dans le code Javascript, il est fait référence à un formulaire ("form"). Or, il n'y a aucun formulaire déclaré dans le corps du texte HTML.

Et j'en passe encore... Ne tirons pas sur l'ambulance.

Je ne sais pas trop d'où vient ce code Javascript, mais la charité nous poussera à taire l'adresse du site d'où il a été copié.
S'il n'y avait que de petits problèmes de syntaxe, je pense qu'on pourrait aider. Mais là, je ne vois guère que la corbeille et tout reprendre de zéro.
Désolé. Vraiment.

PoppyGuy · Message par **PoppyGuy** » 22 nov. 2011, 09:30

Bonjour,
Eh oui, justement, comme tu dis : Une virgule mal placée et vous perdez des heures, pour moi, ce n’est pas des heures, c’est des jours.

Comme cette solution n'est pas bonne (lien dans le message du 21/11/12:56) dommage, mais je suis incapable de la faire (dommage, ça m’évitais de faire une liste par années futures.

Je vais me rabattre sur plusieurs listes, ça peut toujours servir.

Avec les modifications de "Chinon37", j'ai une liste qui fonctionne.
J'ai essayé toute la nuit à trouver une solution en ajoutant une autre liste (à coter).
J’ai modifié, et fait plein d’essais :
1) Ajouter un chiffre pour différencier les listes
2) Mettre des N° différents pour chaque liste
3) Etc……
Mais rien ni fait, je n'arrive même pas à les mettre cote à cote.

Si vous pouviez m'aider ?

Code : Tout sélectionner

<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.Choix1.Liste1.selectedIndex; if (i == 0)
return; url = document.Choix1.Liste1.options[i].value;
parent.location.href = url; }

function Lien() { i = document.Choix2.Liste2.selectedIndex; if (i == 0)
return; url = document.Choix2.Liste2.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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Année
2010&nbsp;
<form name="Choix1">
<select name="Liste1" onchange="Lien()">
<option value="">Choisir un mois</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>
<form name="Choix2">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Année 2011<br>
<select name="Liste2" onchange="Lien()">
<option value="">Choisir un mois</option>
<option value="2011/Janvier/Vent.html">Janvier</option>
<option value="2011/Fevrier/vent.html">Février</option>
<option value="2011/Mars/vent.html">Mars</option>
</select>
</body>
</html>

Lien de la page :
http://meteoclopiniere.olympe-network.com/Essai.html

Merci de votre aide
Cordialement
Guy

Message par **Ymai** » 22 nov. 2011, 18:54

Rebonjour
Est-ce que ce code-ci convient? Il faut certainement encore adapter, mais le principe me semble être là.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr" xml:lang="fr">
<script type="text/javascript">
function go () {
	var an = document.getElementById("annee").value;
	var mois = document.getElementById("mois").value;
	if ((an != "") && (mois != "")) {
		var url = mois+"_"+an+".html";
		parent.location.href = url;
		}
	}
</script>
<head>
	<title>sans titre</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.19.1" />
</head>
<body>
<form name="formulaire" id="formulaire" action="" method="">
<select name="annee" id="annee" onChange="go()">
	<option value="">Choisir une année</option>
	<option value="2009">2009</option>
	<option value="2010">2010</option>
	<option value="2011">2011</option>
</select>

<select name="mois" id="mois" onChange="go()">
	<option value="">Choisir un mois</option>
	<option value="1">Janvier</option>
	<option value="2">Février</option>
	<option value="3">Mars</option>
	<option value="4">Avril</option>
</select>
</form>
</body>
</html>

Ci-dessous, le même, mais commenté:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr" xml:lang="fr">
<script type="text/javascript">
function go () {
	var an = document.getElementById("annee").value;   // dans la variable "an", on récupère la valeur exposée dans l'élément dont l'ID est "annee"
	var mois = document.getElementById("mois").value;  // dans la variable "mois", on récupère la valeur exposée dans l'élément dont l'ID est "mois"
	if ((an != "") && (mois != "")) {     // si une année a été sélectionnée (il y a quelque chose dans la variable) ET un mois a été sélectionné (il y a aussi qque chose dans la variable
		var url = mois+"_"+an+".html";   // alors, on construit une URL. Cette ligne est certainement à aménager
		parent.location.href = url;   // on redirige le navigateur vers cette URL
		}
       // remarquer que si les deux conditions ne sont pas réunies, on ne fait rien du tout dans cette procédure
	}
</script>
<head>
	<title>sans titre</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.19.1" />
</head>
<body>
<form name="formulaire" id="formulaire" action="" method="">
<select name="annee" id="annee" onChange="go()">  <!-- cette liste a pour identifiant "annee". Lorsque la valeur sélectionnée est modifiée, on lance la procédure "go()" définie plus haut, dans le Javascript -->
	<option value="">Choisir une année</option>
	<option value="2009">2009</option>
	<option value="2010">2010</option>
	<option value="2011">2011</option>
</select>

<select name="mois" id="mois" onChange="go()">  <!-- cette liste a pour identifiant "mois". Lorsque la valeur sélectionnée est modifiée, on lance la procédure "go()" définie plus haut, dans le Javascript -->
	<option value="">Choisir un mois</option>
	<option value="1">Janvier</option>
	<option value="2">Février</option>
	<option value="3">Mars</option>
	<option value="4">Avril</option>
</select>
</form>
</body>
</html>

PoppyGuy · Message par **PoppyGuy** » 22 nov. 2011, 20:30

Bonsoir,
Je n'arrive pas à adapter, j'ai toujours une page d'internet blanhe, mais pas mes pages.
A force, je dois faire un blocage.
Voici mon code :

Code : Tout sélectionner

<html>
<head>
<script type="text/javascript">
function go () {
var an = document.getElementById("annee").value;
var mois = document.getElementById("mois").value;
if ((an != "") && (mois != "")) {
var url = mois+"_"+an+".html";
parent.location.href = url;
}
}
</script>
<title>sans titre</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="generator" content="Geany 0.19.1">
</head>
<body style="color: white; background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<form name="formulaire" id="formulaire" action="" method="">
<select name="annee" id="annee" onchange="go()">
<option value="">Choisir une annee</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
<select name="mois" id="mois" onchange="go()">
<option value="">Choisir un mois</option>
<option value="/Janvier/Couleur_du_ciel">Janvier</option>
<option value="/Fevrier/Pressions.html">Fevrier</option>
<option value="/Mars/Recaps.html">Mars</option>
<option value="/Avril/Vent.html">Avril</option>
</select>
</form>
</body>
</html>

Message par **Ymai** » 22 nov. 2011, 21:15

Pourquoi ne reprendre qu'un petit morceau du code fourni? C'est comme vouloir réussir une recette complexe en arrêtant de lire celle-ci après trois lignes.

PoppyGuy · Message par **PoppyGuy** » 22 nov. 2011, 21:23

Quand je copie le code dans "source" et que je fais "conception", et que je reviens dans "source", il y a toute une partie qui a disparue

Geckozone

Liste déroulante

Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Re: Liste déroulante

Qui est en ligne ?