ous rebondissons ici sur notre Pratique précédent,
"obliger
le visiteur a choisir dans une liste". Après
avoir vu cette application de JavaScript, nous passons à
l'étape suivante du formulaire utilisé dans
ce script : remplir dynamiquement la seconde liste selon le
choix de l'utilisateur dans la première liste.
Nous reprenons donc ici totalement le code d'un précédent
tutoriel, et lui ajoutons une vingtaine de lignes nous
permettant de gérer simplement ce remplissage automatique
du second champ.
Nous naviguons
au sein des balises avec facilité grâce au DOM,
et nous faisons le meilleur usage possible de this.options[this.selectedIndex].value,
qui nous permet de récuper la valeur de la sélection
en cours, et des méthodes attachées à .options.
|
Forum |
|
Réagissez
dans les forums
de JDN Développeurs
|
Le code
<script language="JavaScript">
function verif()
{
if (document.layers)
{
formulaire = document.forms.monFormulaire;
}
else
{
formulaire = document.monFormulaire;
}
}
function verifChoixPays()
{
verif();
if (formulaire.choixPays.value == "0")
{
alert('Vous devez tout d\'abord choisir
un pays!');
formulaire.choixPays.focus();
}
}
var villes = new Array();
villes[0] = new Array();
villes[1] = new Array("Paris", "Lyon", "Marseille")
villes[2] = new Array("Londres", "Manchester", "Liverpool")
villes[3] = new Array("Berlin", "Stutgart", "Munich")
function remplirVilles(code)
{
verif();
var lesVilles = villes[code];
if (code>0)
{
formulaire.choixVille.options.length
= lesVilles.length;
for (i=0; i<lesVilles.length; i++)
{
formulaire.choixVille.options[i].value
= lesVilles[i];
formulaire.choixVille.options[i].text
= lesVilles[i];
}
document.monFormulaire.choixVille.options.selectedIndex
= 0;
}
else
{
formulaire.choixVille.options.length
= 1;
formulaire.choixVille.options[0].value
= 0;
formulaire.choixVille.options[0].text
= "-- choisissez une ville";
}
}
</script>
<form name="monFormulaire">
<select name="choixPays" onChange="remplirVilles(this.options[this.selectedIndex].value);">
<option value="0" selected>-- choisissez un pays</option>
<option value="1">France</option>
<option value="2">Royaume-Uni</option>
<option value="3">Allemagne</option>
</select>
<br>
<br>
<select name="choixVille" onFocus="verifChoixPays();">
<option value="0" selected>-- choisissez une ville</option>
</select>
</form>
|