Selection ville par département

cs_rider73 Messages postés 4 Date d'inscription samedi 22 décembre 2007 Statut Membre Dernière intervention 4 août 2011 - 4 août 2011 à 14:08
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 4 août 2011 à 21:22
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

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
4 août 2011 à 21:22
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)
}

}
0
Rejoignez-nous