Liste déroulante avec lien avec autre page [Résolu/Fermé]

Signaler
-
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
-
Bonjour,

J'aimerai mettre sur mon site plusieurs listes déroulantes, dans chaque liste j'aimerai que lorsque l'on clique sur un choix, cela me dirige vers une autre page.

J'ai réussi à le faire avec ce code :

<script type="text/javascript">
window.onload = function() {
formulaire = document.getElementById('form_url');

formulaire.onsubmit = function() {
if(this.elements[0].value != "") {
document.location.href = this.elements[0].value;
}
};

formulaire.elements[0].onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};
};
</script>

<form action="redirection.php" methode="post" id="form_url">
<p>
<label for="url">Menu :</label>
<select name="url" id="url">
<option value="">Choisissez :</option>
<option value="image/Documents/LettreFFJBT/n180.pdf">Accueil</option>
<option value="news.html">Les news</option>
<option value="contact.html">Nous contacter</option>
</select>

</p>
</form>


Mais quand je rajoute une seconde liste ça ne marche plus. Pourquoi?

Merci par avance pour vote aide.

5 réponses

Messages postés
502
Date d'inscription
jeudi 14 mai 2009
Statut
Membre
Dernière intervention
10 mars 2010
45
parce que avec : elements[0] tu prends uniquement la première liste déroulante c a d <select name="url" id="url"> ...

Si tu met plusieurs listes déroulantes il te faut soit plusieurs fonctions (une par liste) soit une boucle qui recense toute tes listes déroulantes.
MErci pour ta réponse. Je suis novice dans la programmation, est-ce que tu pourrais m'indiquer comment faire pour créer une boucle qui recense toutes mes listes. Merci
Messages postés
502
Date d'inscription
jeudi 14 mai 2009
Statut
Membre
Dernière intervention
10 mars 2010
45
A la place de :

formulaire.elements[0].onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};


J'aurai fait un truc dans ce genre:

var selects = formulaire.getElementsByTagName('select');

for(x in selects){

x.onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};

}

Il y a peut être des erreurs, je suis désolé mais je n'ai pas le temps de vérifier ce soir.
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
877
pas besoin de plusieurs fonctions, il suffit de passer la ref de la liste en argument à la fonction:

<script type="text/javascript">
function rediriger(id_liste){
	obj=document.getElementById(id_liste);
	if(obj.value !=""){
		document.location.href=obj.value;	
	}
}
</script> 
<form action="redirection.php" methode="post" id="form_url">
<p>
<label for="url">Menu :</label>
<select name="url1" id="url1" onChange="rediriger('url1');">
<option value="">Choisissez :</option>
<option value="image/Documents/LettreFFJBT/n180.pdf">Accueil</option>
<option value="news.html">Les news</option>
<option value="contact.html">Nous contacter</option>
</select>
<select name="url2" id="url2" onChange="rediriger('url2');">
<option value="">Choisissez :</option>
<option value="image/Documents/LettreFFJBT/blabla.pdf">blabla</option>
<option value="A.html">A</option>
<option value="B.html">B</option>
</select>

</p> 
ENORME!!! ça marche!! merci Alain
Encore merci Alain. Encore une petite question dans ma liste n°4 j'aimerai avoir une 2ème liste qui serait liée à la 1ère, comment je peux faire?

Merci.
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
877
2 ième liste liée comment ?
si tu n'as pas beaucoup de valeurs deuxieme liste liées aux valeurs de la 1 ière tu peux les mettre dans des array javascript et le choix listappele javascript qui genere la 2 ième par l'array correspondant

sinon si c'est plius lours et si tes valeurs sont dans une bdd par exemple, et si tu ne veux pas recharger la page il faut passer par AJAX, c'est nettement plus compliqué