Listes déroulantes [Résolu]

Signaler
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020
-
Guy72
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020
-
Bonjour,
Sur mon site, je cherche à faire une liste déroulante, j'ai bien un modèle qui me plairais, mais ça ne fonctionne pas.
Voilà ce que cela donne.

2.html

Ma liste 1 comprendrait pour l'instant:
Année 2010
Année 2011

Ma liste 2 comprendrait les mois
Janvier
Février
etc......

Je souhaiterais:
1) Clic sur la flèche de la list 1
2) Choisir l'année

3) Clic sur la flèche de la liste 2
4) Choisir le mois, qui me dirige vers la page html


Par exemple : Si je clic sur Janvier, cela doit me dirriger vers "Ciel.html"

Je ne sais pas comment faire pour lier la page.
"Ciel.html"

Merci de votre aide
Cordialement Guy

35 réponses

Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

"Par autre chose", je voulais savoir si ce que j'ai modifié est le plus simple, si il n'y a mieux à faire.

Météoclopinière

Merci de ton aide, sans toi, je n'y serais jamais arrivé


Cordialement Guy
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Bonjour,
Eh oui, c'est bien ça

window.open('http://www.tonsite/com/'+url);


Ça fonctionne

Merci encore de ton aide et de ta patience
Cordialement Guy
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Bonjour,
J'ai ajouter un eutre message pour un menu dynamique.
J'ai juste un problème de décalage des sous/menu part à port au menu

Si tu pouvais voir..............

Merci de ton aide

Cordialement Guy
Messages postés
56
Date d'inscription
mercredi 14 septembre 2011
Statut
Membre
Dernière intervention
7 octobre 2012

Salut Guy,
Je pense qu'il faut que tu mette ta page en PHP et que tu te créé une table SQL.
Messages postés
41
Date d'inscription
vendredi 30 octobre 2009
Statut
Membre
Dernière intervention
13 décembre 2012

Bonjour,

Regarde pour un redirect en javascript et l'évènement onChange de javascript sur google tu devrais trouver ce que tu cherche.
Messages postés
14837
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
26 mars 2020
91
Hello,
Je plussoie galled:
<html>
<head>
<script type="text/javascript">
<!--
function onChange()
{
  window.location="http://www.google.fr";
}
//-->
</script>
</head>

<select id="select" name="select" size="1" onchange="onChange();">
    <option value="default">Veuillez sélectionner une option</option>
<option value="opt1">option1</option>
<option value="opt1">option2</option>
<option value="opt1">option3</option>
</select>

</html>



@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Bonsoir,
Oui d'accord, mais il n'y a qu'une liste.
Finalement, je cherche une 3ème liste


Cordialement Guy
Messages postés
14837
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
26 mars 2020
91
Suit le même principe: une callback "onchange" dans laquelle tu fais ce que bon te semble


@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Bonjour,
Je vis voir ça, mais je n'y crois pas, car :
une callback "onchange", je ne sais pas ce que ça veut dire
Cordialement Guy
Messages postés
14837
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
26 mars 2020
91
Tu as un exemple avec 2 listes.
Je t'ai fait un exemple de redirection de page après sélection dans une liste.
Il reste à afficher la bonne page suivant le mois choisi...
Je te laisse essayer de mettre ça ensemble maintenant*
Néanmoins, si tu n'y arrives toujours pas, repasses par ici et je te filerais un coup de main.

* rien de méchant, c'est juste à titre didactique car, pour moi, "on ne donne pas à un eskimau un poisson, on lui apprend à pêcher"

@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
Messages postés
14837
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
26 mars 2020
91
Re,
Voici un exemple un peu plus complet.
<html>
<head>
<script type="text/javascript">
<!--
function onChange()
{
  // récupération de l'année en 2 étapes:
  // - on parcours la hiérarchie d'éléments pour connaître l'index de l'élément sélectionné dans la liste 'annee'
  // - on récupère le texte associée à cet index
  var index_annee = document.getElementById('annee').selectedIndex;
  var annee = document.getElementById('annee').options[index_annee].text;
  
  // on fait la même chose pour les mois
  var mois = document.getElementById('mois').options[document.getElementById('mois').selectedIndex].text;
  
  // on affiche le résultat
  alert('vous avez sélectionné ' + mois + ' ' + annee);
  
  // pour une redirection suivant les sélections, c'est à voir
  // admettons que le lien à afficher dépend de l'année et du mois
  // il suffit de concaténer les résultat pour avoir, par exemple http://www.monsite.com/2008/octobre.html
  //var url = 'http://www.monsite.com/' + annee + '/' + mois + '.html";
  //window.location=url;
}
//-->
</script>
</head>

<!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1">
    <option value="">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" onchange="onChange();">
    <option value="">Janvier</option>
<option value="">Février</option>
<option value="">Mars</option>
<option value="">Avril</option>
    <option value="">Mai</option>
<option value="">Juin</option>
<option value="">Juillet</option>
<option value="">Août</option>
    <option value="">Septembre</option>
<option value="">Octobre</option>
<option value="">Novembre</option>
<option value="">Décembre</option>
</select>

</html>



@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
Messages postés
14837
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
26 mars 2020
91
Re,
Est-ce que cela correspond à tes attentes?


@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Bonsoir,
Ça devrait ma convenir, mais il faut que je regarde comment aller à mes pages.

J'ai l'mpression, qu'il va me faloir un 3ème liste pour les pages.

Il y a 6 pages par mois.

Cordialement Guy
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Désolé, mais je ne vois rien.


Cordialement Guy
Messages postés
14837
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
26 mars 2020
91
Comment ça "tu ne vois rien?" mon code t' affiché normalement une popup avec
Tes sélections, non?
@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Bonjour,
Excuse de ne pas avoir répondu hier soir, mais je suis sorti.
Je me suis mal exprimé.
Si..si, je vois bien la petite fenêtre.
Mais je voulais dire que j'essayé de voir mes pages, mais je n'y arrive pas.


Cordialement Guy
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Comme, je ne sais pas comment éditer mon ancien message,j'en remets un autre avec le code avec lequel j'ai essayé.

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>buno</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 url = annee + '/' + mois + '.html";
window.location=url;
}
//-->
</script>
</head>



<!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1">
<option value="">Choisir une Année</option>
<option value="">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" onchange="onChange();">
<option value="">Choisir un mois</option>
<option value="2011/Janvier/Vent">Janvier</option>
<option value="">Février</option>
<option value="">Mars</option>
<option value="">Avril</option>
<option value="">Mai</option>
<option value="">Juin</option>
<option value="">Juillet</option>
<option value="">Août</option>
<option value="">Septembre</option>
<option value="">Octobre</option>
<option value="">Novembre</option>
<option value="">Décembre</option>
</select>

</html>


Cordialement Guy
Messages postés
14837
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
26 mars 2020
91
var url = annee + '/' + mois + '.html";

Attention, faute de frappe: tu as une double quote à la fin au lieu d'une simple quote.
De plus, d'après ton code, tes pages ont pour adresse:
http://www.monsite.com/2011/janvier.html
Est-ce le cas? Sinon, il va falloir retravailler l'url.

@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Bonjour,
Ça va déjà beaucoup mieux, impossible pour moi, impossible de savoir que la "double quote" était pas bonne, comme je n'avais rien changé dans ton code (à part enlever ou mettre les //).

Ça ne passe pas par une Url.
Janvier.html, n'est pas la page.

1)Choisir une année
2) choisir un mois
3) Choisir une page

Regarde le code que j'essaye de modifier avec les pages :

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>buno 3 listes</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>



<!-- 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" onchange="onChange();">
<option value="">Choisir un mois</option>
<option value="">Janvier</option>
<option value="">Février</option>
<option value="">Mars</option>
<option value="">Avril</option>
<option value="">Mai</option>
<option value="">Juin</option>
<option value="">Juillet</option>
<option value="">Août</option>
<option value="">Septembre</option>
<option value="">Octobre</option>
<option value="">Novembre</option>
<option value="">Décembre</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">Soleil et Pluie</option>
<option value="Graphiques">Graphiques</option>
<option value="Pressions">Pressions</option>
<option value="Vent">Vitesse du Vent</option>
<option value="Recaps">Statistiques</option>
</select>

</html>


En attendant, merci de ton aide
Cordialement



Cordialement Guy
Messages postés
505
Date d'inscription
dimanche 18 novembre 2007
Statut
Membre
Dernière intervention
17 mars 2020

Ça fonctionne !!!!


J'ai changé quelques trucs comme :
1) Ajouté ça:
var pages = document.getElementById('pages').options[document.getElementById('pages').selectedIndex].text;


2) Modifié ça :
var url = annee + '/' + mois + '/' + pages +'.html';

<select id="mois" name="mois" size="1">


3) Et ajouté ça :
<!-- 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="">Récaps</option>
</select>


Peut être autre chose ?

[http:// Site]

Cordialement Guy
1 2