Alors voilà, je cherche à faire ceci en javascript:
J’ai plusieurs régions dans une liste déroulante. Juste en dessous j’ai une autre liste déroulante qui concerne les départements.
J’aimerais que lorsque l’utilisateur selectionne sa région… que la liste déroulante en dessous propose automatiquement les départements de la région selectionnée.
En fait, c’est idiot, mais je n’ai rien à vous proposer comme début de script et je demande pas qu’on me le fasse. Seulement, je ne sais pas comment se “nomme” cette technique, et du coup je sais pas quoi mettre comme mot-clé dans ma recherche, pour pouvoir trouver des exemples/indications… :neutre:
Je propose 2 solutions (il y en a surement d’autres):
Les tableaux
Le xml et xpath Avec des tableaux.
Il va te falloir stocker toutes les régions et tous les départements.
Je l’avais fait une fois, mais je ne stockais pas tout. J’utilisais une page php pour la sélection de la région. ensuite une requête sur une base qui retournait tous les départements de la région. De là j’écrivais une page avec une région sélectionnée et dans une autre liste, ses départements.
Pour le faire en Javascript, il te falloir un système de clés pour retrouver les départements d’une région.
Par exemple (mais c’est qu’un exemple), tu peux créer un tableau des régions.
Ensuite pour chaque région, tu créés un tableau de départements que tu remplis avec ceux que la région administre.
Il te faut ensuite une correspondance entre l’indice de la région dans le tableau des régions et le nom du tableau qui contient ses départements.
Là tu peux faire facile, par exemple :
Dans le tableau “regions”, la valeur à l’indice 0 correspond à l’Alsace.
Dans un switch, à la case indiceRegion vaut 0 tu extrait le contenu du tableau “depAlsace”. Tu as 68-Haut-Rhin et 67-Bas-Rhin.
Le problème est que vas-tu en faire ?
Un nouvel affichage en fonction du département sélectionné. Avec cette solution, cela impose un cas différent pour chaque département.
Avec du xml et xpath.
Sinon essaye d’utiliser le xml et xpath tu créés une base xml de tes régions et départements, ensuite tu interroge avec xpath en Javascript. Cela va limiter les données stockées et le temps de traitement énormement. http://xmljs.sourceforge.net/website/contr…umentation.html
y a 2* techniques en gros
dans tous les cas tu utilise l’evenement onchange du select…
dans un cas le onchange provoque un this.form.submit() et fait un aller retour vers le serveur en creant de fait le bon deuxieme select avec les valeurs qu il faut …
dans l’autre cas on a au prealable chargé toutes les valeurs possibles dans des tableau javascript et ensuite selon le choix on va mettre les bonne valeur dans le deuxieme select
(*) il ya peut etre une troisieme technique avec des select dans des layers cachés mais c tres sale
oxyfrance : en fait j’ai besoin que ce soit dynamique (au moment ou je selection Alsace, PAF ! 67 et 68 apparaissent dans mon deuxième menu déroulant juste en dessous). Donc l’utilisation des tableaux aurait effectivement été mon choix si j’avais eu besoin de passer par une requete intermédiaire.
Là j’ai besoin d’un sous-choix affiché directement sans rechargement de la page.
Le XML est probablement une très bonne solution mais heuuuu… :sweet:
J’ai jamais mis les pattes dedans encore et je sais pas du tout à quoi ça ressemble :paf:
Ce sera pour plus tard quand je serais grand :lol:
Je vais rester sur du javascript pour le moment en suivant les instructions de quazardous.
Je vais tenter de transcripter ça, et si ça marche pas, je viendrais appeler à l’aide :oui:
Je note donc l’instruction, c’est onChange() qu’il faut utiliser
J’ai tenté ça… mais ça fonctionne toujours pas :riva:
En fait c’est au niveau de la deuxième balise select… comment lui dire que les <option> doivent prendre pour valeur le résultat du script (ici: 3 et 4 si Alsace, 22 et 33 si Corse) ?
<html>
<head>
<title>test</title>
<script language="JavaScript">
function defRegion()
{
var frmRegion = document.getElementById("frmRegion");
var selRegion = document.getElementById("selRegion");
var selDpt = document.getElementById("selDpt");
var indiceRegion = selRegion.value;
// Efface les noeuds de la liste déroulante contenant les
// départements.
var item;
var i = 0;
// Temps que selDpt contient des noeuds...
while (selDpt.hasChildNodes)
{
// Extrait le noeud.
item = selDpt.childNodes[i];
// Supprime le noeud.
selDpt.removeChild(item);
i++;
}
// Suivant la région sélectionnée...
switch (indiceRegion)
{
case "Alsace":
// Créé un noeud pour la liste.
var opt = document.createElement("option");
// Attribut des valeurs aux champs.
opt.setAttribute("value", 3);
opt.text = "3";
// Ajoute le noeud à la liste.
selDpt.appendChild(opt);
break;
case "Corse":
// Créé un noeud pour la liste.
var opt = document.createElement("option");
// Attribut des valeurs aux champs.
opt.setAttribute("value", 22);
opt.text = "22";
// Ajoute le noeud à la liste.
selDpt.appendChild(opt);
break;
}
}
</script>
</head>
<body>
<FORM id="frmRegion" name="selection">
<SELECT id="selRegion" name="region" onChange="javascript:defRegion();">
<OPTION value="Alsace">Alsace</OPTION>
<OPTION value="Corse">Corse</OPTION>
</SELECT>
<SELECT id="selDpt" name="dpt">
</SELECT>
</FORM>
</body>
</html>
J’ai oublié de tester si le select departement est vide.
Sinon il marche sans probleme essaye de mettre en commentaire la partie ou j’efface le contenu des departements.
<html>
<head>
<title>test</title>
<script language="JavaScript">
function defRegion()
{
var frmRegion = document.getElementById("frmRegion");
var selRegion = document.getElementById("selRegion");
var selDpt = document.getElementById("selDpt");
var indiceRegion = selRegion.value;
// Temps que selDpt contient des noeuds...
while (selDpt.hasChildNodes())
{
// Supprime le premier noeud.
selDpt.removeChild(selDpt.firstChild);
}
// Suivant la région sélectionnée...
switch (indiceRegion)
{
case "Alsace":
// Créé un noeud pour la liste.
var opt = document.createElement("option");
// Attribut des valeurs aux champs.
opt.setAttribute("value", 3);
opt.text = "3";
// Ajoute le noeud à la liste.
selDpt.appendChild(opt);
break;
case "Corse":
// Créé un noeud pour la liste.
var opt = document.createElement("option");
// Attribut des valeurs aux champs.
opt.setAttribute("value", 22);
opt.text = "22";
// Ajoute le noeud à la liste.
selDpt.appendChild(opt);
break;
}
}
</script>
</head>
<body>
<FORM id="frmRegion" name="selection">
<SELECT id="selRegion" name="region" onChange="javascript:defRegion();">
<OPTION value="Alsace">Alsace</OPTION>
<OPTION value="Corse">Corse</OPTION>
</SELECT>
<SELECT id="selDpt" name="dpt">
</SELECT>
</FORM>
</body>
</html>
Avec IE on doit créer un element texte pour insérer un texte.
voici le code:
<html>
<head>
<title>test</title>
<script language="JavaScript">
function defRegion()
{
var frmRegion = document.getElementById("frmRegion");
var selRegion = document.getElementById("selRegion");
var selDpt = document.getElementById("selDpt");
var indiceRegion = selRegion.value;
// Temps que selDpt contient des noeuds...
while (selDpt.hasChildNodes())
{
// Supprime le premier noeud.
selDpt.removeChild(selDpt.firstChild);
}
// Suivant la région sélectionnée...
switch (indiceRegion)
{
case "Alsace":
// Créé un noeud pour la liste.
var opt = document.createElement("option");
// Attribue des valeurs aux champs.
opt.setAttribute("value", 3);
// Ajoute du texte.
var itmText = document.createTextNode("3");
opt.appendChild(itmText);
// Ajoute le noeud à la liste.
selDpt.appendChild(opt);
break;
case "Corse":
// Créé un noeud pour la liste.
var opt = document.createElement("option");
// Attribue des valeurs aux champs.
opt.setAttribute("value", 22);
// Ajoute du texte.
var itmText = document.createTextNode("22");
opt.appendChild(itmText);
// Ajoute le noeud à la liste.
selDpt.appendChild(opt);
break;
}
}
</script>
</head>
<body>
<FORM id="frmRegion" name="selection">
<SELECT id="selRegion" name="region" onChange="javascript:defRegion();">
<OPTION value="Alsace">Alsace</OPTION>
<OPTION value="Corse">Corse</OPTION>
</SELECT>
<SELECT id="selDpt" name="dpt">
</SELECT>
</FORM>
</body>
</html>
Par contre; que veux tu dire par "il faut en choisir un par défaut" ?
Merci beaucoup oxy, ça va me permettre d’avancer car ça me bloquait. J’aurais pu prendre une autre solution, mais je tenais à simplifier au maximum (et aussi au niveau de la rapidité) l’intervention de l’utilisateur (d’ou le besoin de quelque chose de dynamyque)
Bien tu as vu que lors du chargement de la page il n’y a aucun département d’affiché, mais bien une région sélectionée.
Il faut donc effectuer un appel à la fonction defRegion au chargement de la page.
Tu peux par exemple l’insérer sous la balise </form>
En ajoutant <script language=“Javascript”> defRegion();</script>
Cela ne fera qu’un seul et unique appel à la fonction au moment où le navigateur arrivera à la balise.
J’ai ma bote secrète… ma première option est “Selectionner une région”, ce qui oblige à activer la fonction finallement, et, dans le cas contraire, me retourne une erreur en obligeant à faire un choix à ce niveau là
Merci oxy, c’est super sympa
ça fonctionne très bien sous IE et Firefox