Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 166 390 ]
Votre IP fleche [ 38.103.63.16 ]
Vous êtes ici : Home Page Dossiers Trucs et astuces (JavaScript) Listes deroulantes dynamiques
Imprimer le document Version Imprimable

Informations Générales

[218] Posts sur le forum
[192] Membres inscrits
Il y a en ligne :
  arrow 0 Membre
  arrow 1 Invité
fled Membre en ligne:
Aucun

Partenariat

Partenariat Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.

Nom de domaine

www.

Partenaires

Alsacreations
Dreamseed
L'éditeur JavaScript
DicoDuNet
Noogle

JavaScript - Listes déroulantes dynamiques

Auteur : 3L!X | Créé le : 01/11/2007 à 15H00

Voici comment créer des listes déroulantes (select) dynamiques.

Comme vous avez dû le constater sur certain formulaire, des listes peuvent interagir entre elles.
Exemple, en fonction d'une première sélection, une deuxième liste vous est proposé.

Un Exemple :

Pays : Ville :

Mise en place

Entre les balises <HEAD> et </HEAD> :

<script type="text/javascript">
// <![CDATA[
  var list0 = new Array();
  var list1 = new Array();
  var list2 = new Array();

  list0[0] = new Option();
  list0[0].text = "-";
  list0[0].value = null;

  list1[0] = new Option();
  list1[0].text = "Paris";
  list1[0].value = "Paris";
  list1[1] = new Option();
  list1[1].text = "Lille";
  list1[1].value = "Lille";
  list1[2] = new Option();
  list1[2].text = "Lyon";
  list1[2].value = "Lyon";
  list1[3] = new Option();
  list1[3].text = "Toulouse";
  list1[3].value = "Toulouse";
  list1[4] = new Option();
  list1[4].text = "Bordeaux";
  list1[4].value = "Bordeaux";

  list2[0] = new Option();
  list2[0].text = "Madrid";
  list2[0].value = "Madrid";
  list2[1] = new Option();
  list2[1].text = "Vigo";
  list2[1].value = "Vigo";
  list2[2] = new Option();
  list2[2].text = "Andorra";
  list2[2].value = "Andorra";
  list2[3] = new Option();
  list2[3].text = "Valencia";
  list2[3].value = "Valencia";

  function chgPays(form)
  {
    //Raz de la liste des options Ville
    for (i = 0; i < form.Ville.options.length*3; i++) {form.Ville.options.length--;}

    //Recherche de l'index de la selection Pays
    var pays = form.Pays.selectedIndex;
    switch(pays)
    {
      case 0:
        for (i = 0; i < list0.length*3; i++) {form.Ville.options[i] = list0[i];}
        break;
      case 1:
        for (i = 0; i < list1.length*3; i++) {form.Ville.options[i] = list1[i];}
        break;
      case 2:
        for (i = 0; i < list2.length*3; i++) {form.Ville.options[i] = list2[i];}
        break;
     }
  }
// ]]>
</script>

Balise <BODY> :

Rien

Entre les balises <BODY> et </BODY> :

<form action="#" id="form">
<div>
  <span>Pays :</span>
  <select name="Pays" onchange="chgPays(this.form)">
    <option value="">-</option>
    <option>France</option>
    <option>Espagne</option>
  </select>
  <span>Ville :</span>
  <select name="Ville">
    <option value="">-</option>
  </select>
  <input type="submit" />
</div>
</form>

[0] commentaires - Voir/EditerAjout commentaire

Haut de page