IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contributions JavaScript / AJAX Discussion :

Les formulaires (partie 2) Comment lier deux listes déroulantes entre elles ? [Fait] [FAQ]


Sujet :

Contributions JavaScript / AJAX

  1. #1
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut Les formulaires (partie 2) Comment lier deux listes déroulantes entre elles ?
    Comment lier deux listes déroulantes entre elles ?
    http://javascript.developpez.com/faq...js#listesLiees

    la syntaxe est un peu vieillotte mais malgré tout le script fonctionne encore sous FF et IE 9.

    Toutefois je ne sais pas trop comment aborder la mise à jour. J'ai plusieurs idées en tête :
    - façon simple : mettre à jour la syntaxe ;
    - manière plus élaborée : essayer d'utiliser la syntaxe JSON (créer des objets pays, villes, rues) ;
    - plus complexe (en tout cas pour moi) : utiliser AJAX : créer un fichier XML que le script ira lire pour créer les listes. Je ne suis pas trop familier avec AJAX, donc un petit coup de main serait le bienvenu.

  2. #2
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Voici une proposition de correction :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    var Element = function(nom)
    {
    	this.nom = nom;
    	this.tabObj = new Array();
    }
     
    Element.prototype={
    	rNom : function()
    	{
    		return this.nom;
    	}
    	,
    	ajouterObj : function(obj)
    	{
    		this.tabObj.push(obj);
    	}
    	,
    	rObj: function(idx)
    	{
    		return this.tabObj[idx];
    	}
    	,
    	nbObj : function()
    	{
    		return this.tabObj.length;
    	}
     
    }
     
    /*********************************************************************/
    var Continent = new Element("Continent");
     
    Continent.ajouterObj(new Element("Pays1"));
    Continent.rObj(0).ajouterObj(new Element("Ville1 Pays1"));
    Continent.rObj(0).rObj(0).ajouterObj(new Element("Rue1 Ville1 Pays1"));
    Continent.rObj(0).rObj(0).ajouterObj(new Element("Rue2 Ville1 Pays1"));
    Continent.rObj(0).rObj(0).ajouterObj(new Element("Rue3 Ville1 Pays1"));
     
    Continent.rObj(0).ajouterObj(new Element("Ville2 Pays1"));
    Continent.rObj(0).rObj(1).ajouterObj(new Element("Rue1 Ville2 Pays1"));
    Continent.rObj(0).rObj(1).ajouterObj(new Element("Rue2 Ville2 Pays1"));
     
    Continent.rObj(0).ajouterObj(new Element("Ville3 Pays1"));
    Continent.rObj(0).rObj(2).ajouterObj(new Element("Rue1 Ville3 Pays1"));
    Continent.rObj(0).rObj(2).ajouterObj(new Element("Rue2 Ville3 Pays1"));
     
    Continent.ajouterObj(new Element("Pays2"));
    Continent.rObj(1).ajouterObj(new Element("Ville1 Pays2"));
    Continent.rObj(1).rObj(0).ajouterObj(new Element("Rue1 Ville1 Pays2"));
    Continent.rObj(1).rObj(0).ajouterObj(new Element("Rue2 Ville1 Pays2"));
     
    Continent.rObj(1).ajouterObj(new Element("Ville2 Pays2"));
    Continent.rObj(1).rObj(1).ajouterObj(new Element("Rue1 Ville2 Pays2"));
    Continent.rObj(1).rObj(1).ajouterObj(new Element("Rue2 Ville2 Pays2"));
     
     
    /*********************************************************************/
    function charger(listeSrc)
    {
    	var listeDest;
    	var idxListeSrc, idxListeDest;
    	var obj;
     
     
    	if (listeSrc != null) 
    	{
    		idxListeSrc = listeSrc.id.replace("liste_","");
    		idxListeSrc = parseInt(idxListeSrc, 10);
    		idxListeDest = idxListeSrc + 1;
    	}
    	else
    	{
    		idxListeSrc = -1;
    		idxListeDest = 0;
    	}
     
    	/*************************/
    	obj = Continent;	// /!\ variable globale Continent
     
    	for (i=0; i < idxListeDest; i++)
     		obj = obj.rObj(document.getElementById("liste_" + i).selectedIndex-1);
     
     
    	listeDest = document.getElementById("liste_" + idxListeDest);
    	listeDest.options.length = 0;
    	listeDest.add(new Option("Faites votre choix", "0", false, false));
     
    	if (obj!=null)
    	{
    		n = obj.nbObj();
    		for (i=0; i<n; i++)
    		{
    			listeDest.add(new Option(obj.rObj(i).rNom(), obj.rObj(i).rNom(), false, false));
    		}
    	}
     
    }

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <body onload="charger(null)">
     
    <select id="liste_0" onchange="charger(this)">
    	<option value="0">Faites votre choix</options>
    </select>
     
    <select id="liste_1" onchange="charger(this)">
    	<option value="0">Faites votre choix</options>
    </select>
     
    <select id="liste_2">
    	<option value="0">Faites votre choix</options>
    </select>
     
     
    </body>
    qu'en pensez-vous ?

  3. #3
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Revoir la syntaxe n'est pas plus mal. Nous pouvons avoir trois Q/R : versions actuelle, JSON et Ajax.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    Citation Envoyé par Auteur
    Voici une proposition de correction :...
    je ne suis pas sûr que cette approche soit très abordable pour un lecteur de FAQ débutant.

    La version Ajax quant à elle existe déjà, Web 2.0, allez plus loin avec AJAX et XMLHttpRequest pas sûr qu'il soit nécessaire de la reprendre ici. Dans cette FAQ il semble que nous traitons de listes simples.

    Je dirais apriori qu'il faudrait
    Citation Envoyé par Auteur
    - manière plus élaborée : essayer d'utiliser la syntaxe JSON (créer des objets pays, villes, rues) ;

  5. #5
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Oui okay, je mettrai un lien vers l'article pour la version Ajax.

    NoSmoking, quel code proposerais-tu alors ?

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    NoSmoking, quel code proposerais-tu alors ?
    un truc entre les 2.

    concernant le HTML
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      <form name="a_fond_la_forme">
        <p>
          <label for="listepays">Choisir un pays</label>
          <select id="listepays" name="listepays" onchange='fillSelect(this.id, this.value)'></select>
        </p>
        <p>
          <label for="listeville">Choisir une ville</label>
          <select id="listeville" name="listeville" onchange='fillSelect(this.id, this.value)'></select>
        </p>
        <p>
          <label for="listerue">Choisir une rue</label>
          <select id="listerue" name="listerue"></select>
        </p>
      </form>
    Pour la déclaration des données
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    /**
    * déclaration des données pour les SELECT
    **/
    var pays = [
      {'valeur': 'p0', 'texte': 'pays 0'},
      {'valeur': 'p1', 'texte': 'pays 1'},
      {'valeur': 'p2', 'texte': 'pays 2'}
    ];
    var ville = {
      'p0' :  // clé sur data pays
        [
          { 'valeur': 'p0v0', 'texte': 'pays_0 ville_0'},
          { 'valeur': 'p0v1', 'texte': 'pays_0 ville_1'},
          { 'valeur': 'p0v2', 'texte': 'pays_0 ville_2'}
        ],
      'p1' :
        [
          { 'valeur': 'p1v0', 'texte': 'pays_1 ville_0'},
          { 'valeur': 'p1v1', 'texte': 'pays_1 ville_1'},
          { 'valeur': 'p1v2', 'texte': 'pays_1 ville_2'}
        ],
      'p2' :
        [
          { 'valeur': 'p2v0', 'texte': 'pays_2 ville_0'},
          { 'valeur': 'p2v1', 'texte': 'pays_2 ville_1'},
          { 'valeur': 'p2v2', 'texte': 'pays_2 ville_2'}
        ]
      };
    var rue = {
      'p0v0' :  // clé sur data ville
        [
          { 'valeur': 'p0v0r0', 'texte': 'pays_0 ville_0 rue_0'},
          { 'valeur': 'p0v0r1', 'texte': 'pays_0 ville_0 rue_1'},
          { 'valeur': 'p0v0r2', 'texte': 'pays_0 ville_0 rue_2'}
        ],
      'p0v1' :
        [
          { 'valeur': 'p0v1r0', 'texte': 'pays_0 ville_1 rue_0'},
          { 'valeur': 'p0v1r1', 'texte': 'pays_0 ville_1 rue_1'},
          { 'valeur': 'p0v1r2', 'texte': 'pays_0 ville_1 rue_2'}
        ],
      'p0v2' :
        [
          { 'valeur': 'p0v2r0', 'texte': 'pays_0 ville_2 rue_0'},
          { 'valeur': 'p0v2r1', 'texte': 'pays_0 ville_2 rue_1'},
          { 'valeur': 'p0v2r2', 'texte': 'pays_0 ville_2 rue_2'}
        ],
      'p1v0' :
        [
          { 'valeur': 'p1v0r0', 'texte': 'pays_1 ville_0 rue_0'},
          { 'valeur': 'p1v0r1', 'texte': 'pays_1 ville_0 rue_1'},
          { 'valeur': 'p1v0r2', 'texte': 'pays_1 ville_0 rue_2'}
        ],
      'p1v1' :
        [
          { 'valeur': 'p1v1r0', 'texte': 'pays_1 ville_1 rue_0'},
          { 'valeur': 'p1v1r1', 'texte': 'pays_1 ville_1 rue_1'},
          { 'valeur': 'p1v1r2', 'texte': 'pays_1 ville_1 rue_2'}
        ],
      'p1v2' :
        [
          { 'valeur': 'p1v2r0', 'texte': 'pays_1 ville_2 rue_0'},
          { 'valeur': 'p1v2r1', 'texte': 'pays_1 ville_2 rue_1'},
          { 'valeur': 'p1v2r2', 'texte': 'pays_1 ville_2 rue_2'}
        ],
      'p2v0' :
        [
          { 'valeur': 'p2v0r0', 'texte': 'pays 2 ville_0 rue_0'},
          { 'valeur': 'p2v0r1', 'texte': 'pays 2 ville_0 rue_1'},
          { 'valeur': 'p2v0r2', 'texte': 'pays 2 ville_0 rue_2'}
        ],
      'p2v1' :
        [
          { 'valeur': 'p2v1r0', 'texte': 'pays 2 ville_1 rue_0'},
          { 'valeur': 'p2v1r1', 'texte': 'pays 2 ville_1 rue_1'},
          { 'valeur': 'p2v1r2', 'texte': 'pays 2 ville_1 rue_2'}
        ],
      'p2v2' :
        [
          { 'valeur': 'p2v2r0', 'texte': 'pays 2 ville_2 rue_0'},
          { 'valeur': 'p2v2r1', 'texte': 'pays 2 ville_2 rue_1'},
          { 'valeur': 'p2v2r2', 'texte': 'pays 2 ville_2 rue_2'}
        ]
      };
    Pour la partie fonction, en respectant l'orientation du départ, j'aurais tendance à mettre ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    /**
    * fonction d'ajout des options
    **/
    function updateSelect( id_select, liste){
      var oOption,
          oSelect = document.getElementById( id_select),
          i, nb = liste.length;
      // vide le SELECT
      oSelect.options.length = 0;
      // création des options d'après la liste
      for (i = 0; i < nb; i++) {
        // création option
        oOption = new Option( liste[i].texte, liste[i].valeur);
        // ajout de l'option en fin
        oSelect.add( oOption);    
      }
      // on retourne la valeur pour le SELECT suivant
      return oSelect.value;
    }
    /**
    * fonction de remplissage des SELECT
    **/
    function fillSelect( id_select, valeur) {
      switch (id_select) {
        case 'init':
          valeur = updateSelect( 'listepays', pays);    
          // pas de break pour une initialisation complète
        case 'listepays':
          valeur = updateSelect( 'listeville', ville[valeur]);
          updateSelect( 'listerue', rue[valeur]);
          break;
        case 'listeville':
          updateSelect( 'listerue', rue[valeur]);    
          break;
      }
    }
    Pour cette dernière fonction j'aurais une préférence pour un effet cascade bien dans l'esprit lié, en écrivant le code comme suit
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /**
    * fonction de remplissage des SELECT
    **/
    function fillSelect( id_select, valeur) {
      switch (id_select) {
        case 'init':
          // mise à jour SELECT
          valeur = updateSelect( 'listepays', pays);    
          // appel sur SELECT lié
          fillSelect( 'listepays', valeur);
          break;
        case 'listepays':
          // mise à jour SELECT    
          valeur = updateSelect( 'listeville', ville[valeur]);
          // appel sur SELECT lié
          fillSelect( 'listeville', valeur);
          break;
        case 'listeville':
          // mise à jour SELECT    
          updateSelect( 'listerue', rue[valeur]);    
          break;
      }
    }
    en final le code complet donnerait ceci
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Comment lier des listes déroulantes entre elles</title>
    <style>
    body{
      margin:2em;
      font-family:Verdana;
      font-size:100%
    }
    label{
      display:inline-block;
      width:10em;
    }
    select{
      width:15em;
      font-family: Verdana;
    }
    </style>
    <script>
    /**
    * déclaration des données pour les SELECT
    **/
    var pays = [
      {'valeur': 'p0', 'texte': 'pays 0'},
      {'valeur': 'p1', 'texte': 'pays 1'},
      {'valeur': 'p2', 'texte': 'pays 2'}
    ];
    var ville = {
      'p0' :  // clé sur data pays
        [
          { 'valeur': 'p0v0', 'texte': 'pays_0 ville_0'},
          { 'valeur': 'p0v1', 'texte': 'pays_0 ville_1'},
          { 'valeur': 'p0v2', 'texte': 'pays_0 ville_2'}
        ],
      'p1' :
        [
          { 'valeur': 'p1v0', 'texte': 'pays_1 ville_0'},
          { 'valeur': 'p1v1', 'texte': 'pays_1 ville_1'},
          { 'valeur': 'p1v2', 'texte': 'pays_1 ville_2'}
        ],
      'p2' :
        [
          { 'valeur': 'p2v0', 'texte': 'pays_2 ville_0'},
          { 'valeur': 'p2v1', 'texte': 'pays_2 ville_1'},
          { 'valeur': 'p2v2', 'texte': 'pays_2 ville_2'}
        ]
      };
    var rue = {
      'p0v0' :  // clé sur data ville
        [
          { 'valeur': 'p0v0r0', 'texte': 'pays_0 ville_0 rue_0'},
          { 'valeur': 'p0v0r1', 'texte': 'pays_0 ville_0 rue_1'},
          { 'valeur': 'p0v0r2', 'texte': 'pays_0 ville_0 rue_2'}
        ],
      'p0v1' :
        [
          { 'valeur': 'p0v1r0', 'texte': 'pays_0 ville_1 rue_0'},
          { 'valeur': 'p0v1r1', 'texte': 'pays_0 ville_1 rue_1'},
          { 'valeur': 'p0v1r2', 'texte': 'pays_0 ville_1 rue_2'}
        ],
      'p0v2' :
        [
          { 'valeur': 'p0v2r0', 'texte': 'pays_0 ville_2 rue_0'},
          { 'valeur': 'p0v2r1', 'texte': 'pays_0 ville_2 rue_1'},
          { 'valeur': 'p0v2r2', 'texte': 'pays_0 ville_2 rue_2'}
        ],
      'p1v0' :
        [
          { 'valeur': 'p1v0r0', 'texte': 'pays_1 ville_0 rue_0'},
          { 'valeur': 'p1v0r1', 'texte': 'pays_1 ville_0 rue_1'},
          { 'valeur': 'p1v0r2', 'texte': 'pays_1 ville_0 rue_2'}
        ],
      'p1v1' :
        [
          { 'valeur': 'p1v1r0', 'texte': 'pays_1 ville_1 rue_0'},
          { 'valeur': 'p1v1r1', 'texte': 'pays_1 ville_1 rue_1'},
          { 'valeur': 'p1v1r2', 'texte': 'pays_1 ville_1 rue_2'}
        ],
      'p1v2' :
        [
          { 'valeur': 'p1v2r0', 'texte': 'pays_1 ville_2 rue_0'},
          { 'valeur': 'p1v2r1', 'texte': 'pays_1 ville_2 rue_1'},
          { 'valeur': 'p1v2r2', 'texte': 'pays_1 ville_2 rue_2'}
        ],
      'p2v0' :
        [
          { 'valeur': 'p2v0r0', 'texte': 'pays 2 ville_0 rue_0'},
          { 'valeur': 'p2v0r1', 'texte': 'pays 2 ville_0 rue_1'},
          { 'valeur': 'p2v0r2', 'texte': 'pays 2 ville_0 rue_2'}
        ],
      'p2v1' :
        [
          { 'valeur': 'p2v1r0', 'texte': 'pays 2 ville_1 rue_0'},
          { 'valeur': 'p2v1r1', 'texte': 'pays 2 ville_1 rue_1'},
          { 'valeur': 'p2v1r2', 'texte': 'pays 2 ville_1 rue_2'}
        ],
      'p2v2' :
        [
          { 'valeur': 'p2v2r0', 'texte': 'pays 2 ville_2 rue_0'},
          { 'valeur': 'p2v2r1', 'texte': 'pays 2 ville_2 rue_1'},
          { 'valeur': 'p2v2r2', 'texte': 'pays 2 ville_2 rue_2'}
        ]
      };
    /**
    * fonction d'ajout des options
    **/  
    function updateSelect( id_select, liste){
      var oOption,
          oSelect = document.getElementById( id_select),
          i, nb = liste.length;
      // vide le SELECT
      oSelect.options.length = 0;
      // création des options d'après la liste
      for (i = 0; i < nb; i++) {
        // création option
        oOption = new Option( liste[i].texte, liste[i].valeur);
        // ajout de l'option en fin
        oSelect.add( oOption);    
      }
      // on retourne la valeur pour le SELECT suivant
      return oSelect.value;
    }
    /**
    * fonction de remplissage des SELECT
    **/
    function fillSelect( id_select, valeur) {
      switch (id_select) {
        case 'init':
          // mise à jour SELECT
          valeur = updateSelect( 'listepays', pays);    
          // appel sur SELECT lié
          fillSelect( 'listepays', valeur);
          break;
        case 'listepays':
          // mise à jour SELECT    
          valeur = updateSelect( 'listeville', ville[valeur]);
          // appel sur SELECT lié
          fillSelect( 'listeville', valeur);
          break;
        case 'listeville':
          // mise à jour SELECT    
          updateSelect( 'listerue', rue[valeur]);    
          break;
      }
    }
     
    </script>
    </head>
    <body>
      <form name="a_fond_la_forme">
        <p>
          <label for="listepays">Choisir un pays</label>
          <select id="listepays" name="listepays" onchange='fillSelect(this.id, this.value)'></select>
        </p>
        <p>
          <label for="listeville">Choisir une ville</label>
          <select id="listeville" name="listeville" onchange='fillSelect(this.id, this.value)'></select>
        </p>
        <p>
          <label for="listerue">Choisir une rue</label>
          <select id="listerue" name="listerue"></select>
        </p>
      </form>
    <script>
    // remplissage des SELECT lorsque le DOM est constitué
    fillSelect('init');
    </script>
    </body>
    </html>

  7. #7
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Ah ben oui. Je pourrais d'ailleurs utiliser l'exemple complet comme page de test. Parfait.
    Si ça va pour tout le monde, j'essaie de publier ça ce jeudi.

  8. #8
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par NoSmoking
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <script>
    // remplissage des SELECT lorsque le DOM est constitué
    fillSelect('init');
    </script>
    Pour le code de NoSmoking au lieu d'écrire la fonction d'initialisation à la fin du script, je l'aurais placée dans l'événement onload :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <body onload="fillSelect('init');">




    Mais la question que je me pose est de savoir si effectivement cette Q/R est vraiment destinée à des débutants. Je vois plusieurs choses :
    - on reste au niveau des débutants et dans ce cas on propose un code javascript dans lequel on crée les listes (comme ce qu'il y a dans la FAQ et dans les réponses postées). Le bémol est que l'on voit très rapidement que l'on ne peut appliquer ce code que pour des petites listes, sinon cela devient rapidement lourd ;
    - on passe au niveau supérieur en utilisant des méthodes moins classiques mais qui ont, je pense, le mérite de proposer un code plus léger (d'où ma proposition d'AJAX).

    Peut-être qu'une remarque indiquant les limites de ce code ne serait pas de trop. Et indiquer que pour des listes plus conséquentes, il faut s'orienter vers un code impliquant un serveur. Qu'en pensez-vous ?

  9. #9
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Parfait. Je vais faire ça et je mettrai un lien vers l'article sur la version Ajax.

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Citation Envoyé par Auteur
    Pour le code de NoSmoking au lieu d'écrire la fonction d'initialisation à la fin du script, je l'aurais placée dans l'événement onload :
    je plussoies, erreur d’inattention à la rédaction

    Effectivement ce code de s'applique qu'à des listes simples à mettre en oeuvre, de plus j'ai oublié de mentionner que le titre n'est pas idoine dans le sens où on est en présence de 3 listes et non 2.

  11. #11
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Oui j'avais noté cette histoire de titre mais les recherches portent sur "2 listes". Rarement sur "3". Donc j'ai décidé de conserver le titre.

  12. #12
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Voila, c'est en ligne et ce sera annoncé ce jeudi.

    Vous avez encore le temps de faire des remarques d'ici là.


  13. #13
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    à l'époque Denis avait proposé plusieurs liens dans la discussion dont le blog de rawsrc en plus de l'exemple avec AJAX proposé par siddh.

  14. #14
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Oui je devrais plutôt mettre ce lien-là. J'essaie de modifier ça dès que possible.

  15. #15
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par vermine Voir le message
    Oui je devrais plutôt mettre ce lien-là. J'essaie de modifier ça dès que possible.
    non au contraire, ajoute les liens vers les exemples de rawsrc et siddh.

  16. #16
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    C'est plus ou moins pareil mais d'accord, je le fais dans ton sens.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 16/11/2013, 20h36
  2. Réponses: 2
    Dernier message: 20/05/2011, 10h04
  3. [Formulaire] lier deux listes déroulantes
    Par Ayack dans le forum IHM
    Réponses: 2
    Dernier message: 20/02/2008, 13h46
  4. Lier 2 listes déroulantes entre elles, et avec MySQL ?
    Par mLk92 dans le forum Général JavaScript
    Réponses: 17
    Dernier message: 30/08/2006, 17h01
  5. [Javascript] Comment lier deux liste de sélection
    Par orleans dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 21/04/2006, 08h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo