Selection ville par département

Signaler
Messages postés
4
Date d'inscription
samedi 22 décembre 2007
Statut
Membre
Dernière intervention
4 août 2011
-
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
-
Bonjour,

je suis à la recherche d'un tutorial pour pouvoir mettre en place plusieurs listes déroulantes (département, ville) où quand on sélectionne le département, ça affiche toutes les villes correspondantes dans la liste déroulante des villes...

j'ai beau cherché sur google mais ça me met que des script déjà tout fait ou blindé d'erreurs que les gens veulent faire corriger...

ce que je veux c'est un tuto pour comprendre ce que je fais...

en vous remerciant.

1 réponse

Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
116
voici un exemple simple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>

var tbnormandie=new Array('rouen','havre','caen');
var tbildefrance=new Array('cergy','pontoise','orly','versaille');
var tbpaca=new Array('marseille','saint-trop','miau');


function choix(lui){

var valeur=lui.value;

document.getElementById('vivile').innerHTML=''

if (valeur == "normandie"){
var tableau=tbnormandie
}

else if (valeur == "ile de france"){
var tableau=tbildefrance
}

else if (valeur == "paca"){
var tableau=tbpaca
}

for ( var i = 0 ; i < tableau.length ; i++) {

var elem=document.createElement('option')
elem.setAttribute('value',tableau[i])

var text = document.createTextNode(tableau[i])
elem.appendChild(text)

document.getElementById('vivile').appendChild(elem)
}

}
</script>

</head>



region

<select id="region" name="region" onChange='choix(this)'>
<option value="normandie">normandie</option>;
<option value="ile de france">ile de france</option>;
<option value="paca">paca</option>;
   
</select>





ville
<select name="viville" id='vivile'>
   
</select>


</html>


dans la fonction on peut remplacer les if par switch ce qui donne

function choix(lui){

var valeur=lui.value;

document.getElementById('vivile').innerHTML=''

switch (valeur){

case "normandie":
var tableau=tbnormandie
break;

case "ile de france":
var tableau=tbildefrance
break;

case "paca":
var tableau=tbpaca
break;

}

for ( var i = 0 ; i < tableau.length ; i++) {

var elem=document.createElement('option')
elem.setAttribute('value',tableau[i])

var text = document.createTextNode(tableau[i])
elem.appendChild(text)

document.getElementById('vivile').appendChild(elem)
}

}