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...
<!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)
}
}
