Deux select liés sans l'aide d'AJAX

Bonjour à tous !

Cela fait maintenant quelques jours que je souhaite lier deux Selects uniquement à l'aide de javascript sans connexion serveur.

-> Pour faire simple, j'ai un premier Select qui permet de choisir une région.
En fonction du choix effectué, le second affichera les départements de la région sélectionnée...

Voici mon idée de script :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<select name="regions" id="re" onchange="dep();">     <option value="reset">->Choisissez une région<-</option> <option value="Alsace">Alsace</option> .....     </select>     <script type="text/javascript">   function dep() {   var dep = document.getElementById('re');     if (dep.value == "Alsace")   {   document.getElementById('dep').options[1] = new Option('Bas-Rhin'); document.getElementById('dep').options[2] = new Option('Haut-Rhin');   }   if (dep.value == "Aquitaine")   {   document.getElementById('dep').options[1] = new Option('Dordogne');     } .... } </script>     <select name="selectdpt" id="dep">     <option value="reset"<?php if ($_POST['selectdpt'] == "reset") { echo "selected='selected'";}?>>->Choisissez un département<-</option> // S'affiche ici les options supplémentaires...     </select>

---

Ce script fonctionne mais je me demande s'il est possible de faire mieux...Qu'en pensez-vous ?

Peut être en passant par un tableau à plusieurs dimensions

Donc je pourrai pour chaque régions établir un array avec les départements correspondants ?

Je vois pas pourquoi ça ne fonctionnerais pas :)
Essai tu verras bien. ;)

Je test ça et je reviens ;)

Voila j'ai testé mais ça ne fonctionne pas, j'ai du me planter quelque part...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<script type="text/javascript">   var ok = new Array ("Bas-Rhin","Haut-Rhin");   function departement() {   var dep = document.getElementById('re');     if (dep.value == "Alsace")   {   for (i=0; i<ok.length; i++)   {   document.getElementById('dep').options[i].value = ok[i]; document.getElementById('dep').options[i].text = ok[i];     }   } </script>

---

Bonjour,

:fleche: Listes déroulantes liées entre elles.

A+.

Merci pour le lien ;)
Mais je voudrai juste savoir ce qui ne va pas (selon vous) dans mon script.. je sais j'insiste mais je pense vraiment ne pas être loin de la solution !

Code:

---

<select name="regions" id="re" onchange="dep();">

---

Code:

---

document.getElementById('dep')

---

D'abord, il te manque un guillemet fermant de la fonction. Ensuite

Code:

---

1 2 3 4 5 6 7 8 9 10 11

if (dep.value == "Alsace")   { document.getElementById('dep').options.length = 0; for (i=0; i<ok.length; i++)   { document.getElementById('dep').options[i] = new Option(ok[i],ok[i]); }   }

---

Vérifie les id comme Bovino l'a indiqué.

A+.

Oui désolé pour la guillemet, j'ai retapé trop rapidement le code de ma page qui lui est correct :ccool:
Je ne savais pas que c'était une erreur car ma fonction dep() est exécutée lors du onchange sur le 1er select puis cette fonction se charge d'insérer dans mon second select id="dep" les nouvelles options par l'intermédiaire de ma boucle :?

Code:

---

document.getElementById('dep').options.length = 0;

---

Si j'ai bien compris ce code permet d'initialiser le nombre des options du select afin de pouvoir insérer sans problème les nouvelles options quel que sois leurs nombres ?

Citation:

---

Envoyé par Aloam

Code:

---

1 2 3

document.getElementById('dep').options.length = 0;

---

Si j'ai bien compris ce code permet d'initialiser le nombre des options du select afin de pouvoir insérer sans problème les nouvelles options quel que sois leurs nombres ?

---

oui.

Parfait merci à vous je test ca ;)

Voila le script fonctionne bien !

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<script type="text/javascript">   var ok = new Array("Bas-Rhin","Haut-Rhin");   function departement() {     var dep = document.getElementById('re');       if (dep.value == "Alsace")     {   document.getElementById('dep').options.length = 0;   for (i=0; i<ok.length; i++)   {   document.getElementById('dep').options[i] = new Option(ok[i],ok[i]);     }     } }   </script>

---

Seul problème, l'unique option déjà présente dans mon second Select n’apparaît pas ..

Bonsoir,

Citation:

---

Seul problème, l'unique option déjà présente dans mon second Select n’apparaît pas ..

---

normal, tu la détruit à cette ligne

Code:

---

document.getElementById('dep').options.length = 0;

---

si tu veux la conserver mets length à 1, ATTENTION il te faudra en tenir compte dans ta boucle for.

ok je te remercie :ccool: j'avais essayé de mettre length=1 mais je n'avais pas modifié ma boucle for..

Code:

---

1 2 3

for (i=1; i<ok.length; i++)

---

Pour que sa fonctionne, j'ai du rajouter une option factice en 1ere position au sein de mon tableau.. ^^'

Code:

---

1 2 3

var ok = new Array("","Bas-Rhin","Haut-Rhin");

---

Avec ce bricolage, ma boucle insère bien mes deux options [1] et [2] dans mon select sans "effacer" la 1ere [0] déjà inscrite :oops:

Sans avoir ajouté dans le tableau, tu utilisent seulement options.length ou bien tu ajoutes 1 à l'indice de la boucle i.

Code:

---

1 2 3 4 5 6 7

var ok = new Array("Bas-Rhin","Haut-Rhin"); ... for (i=0; i<ok.length; i++) { document.getElementById('dep').options[i+1] = new Option(ok[i],ok[i]);   }

---

A+.

Citation:

---

Envoyé par Bovino

Code:

---

<select name="regions" id="re" onchange="dep();">

---

Code:

---

document.getElementById('dep')

---

---

Comme toujous je dirais que ça ne sert à rien de rechercher des id dans la page

Code:

---

<select name="regions" id="re"onchange="dep(this);">

---

Code:

---

1 2 3

function dep(dep) { // cette ligne ne sert à rien vu que dep est passé en paramètre // var dep = document.getElementById('re');')

---

A+JYT

Parfait tout fonctionne j'essai de finaliser mon code mais je bute sur la sélection d'une option avec "selected" :/

J'ai testé quelques scripts mais ça ne fonctionne pas..

J'aimerai que l'option sélectionné manuellement dans le select des départements soit toujours sélectionné au rechargement de la page, comme pour un echo 'selected="selected"' en PHP.
Une fois la sélection faite je vais devoir récupérer la valeur afin d'effectuer mes vérifications côté serveur.

Vous avez des idées ?

Personne n'a d'idées ?

J'ai cherché et apparement il serait possible de faire quelquechose avec la propriété "selectindex".

Bonjour,

Si tu veux conserver l'option sélectionnée, regarde la Faq.

A+.