TUTORIEL CLIENTS WEB 
JavaScript : remplir dynamiquement une liste
Les formulaires peuvent facilement devenir très dynamiques, et générer leurs propres contenus sans devoir recharger la page... (23/04/2004)

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>

 
Xavier Borderie, JDN Développeurs
 
Accueil | Haut de page