[Article] Créer des listes déroulantes liées entre elles sans utiliser Ajax

**NoSmoking** · 03/04/2016, 17h33

Bonjour,

Je vous propose un article : Créer des listes déroulantes liées entre elles sans utiliser Ajax.

Dans celui-ci, nous allons voir comment lier des listes déroulantes, <select>, entre elles sans faire appel à des requêtes serveur de type Ajax, tout se passe donc côté client.

L'approche que je vous propose est une approche s'appuyant sur une pseudobase de données facile à maintenir associée à une fonction de recherche.

N'hésitez pas à faire part de vos remarques ou commentaires concernant cet article.

Bonne lecture.

Créer des listes déroulantes liées entre elles sans utiliser Ajax.

Les meilleurs cours et tutoriels pour apprendre la programmation JavaScript

Les meilleurs cours et tutoriels pour apprendre la programmation Web

Invité · 04/04/2016, 10h15

Bonjour NoSmoking,

D'abord : très bon article !

1/ Grosse coquille !!

ce n'est pas la région "Haut de France" mais "Hauts de France" (on est plusieurs ! )

2/ (plus sérieux)
ne faudrait-il pas mettre en titre "...listes liées en cascade..." (ou un truc du genre)
UNE liste étant liée à UNE SEULE autre "parente" ?

Sauf erreur (car j'ai lu vite fait), tu ne traites pas d'une liste dépendant (par exemple) de DEUX ou PLUSIEURS autres listes.

Ex. : liste de véhicules dépendant de :

modèle
année
couleur
...

A moins que ce soit le sujet d'un autre article ?

3/ il existe dans la FAQ JavaScript : Comment lier deux listes déroulantes entre elles ?
Je n'ai pas vu de lien dans l'article...

A voir aussi : http://www.developpez.net/forums/d59...s-liees-entre/

**danielhagnoul** · 04/04/2016, 10h46

Il y a aussi le département du "Creuset" au lieu du département de la "Creuse".

Si les erreurs ont été commises par l'INSEE, c'est encore plus grave.

**Francis Walter** · 04/04/2016, 15h26

Bonjour,

J'ai fait une lecture rapide et je trouve l'article bien.
Je vais profiter de cette discussion pour partager une méthode que j'ai l'habitude d'utiliser en manipulant les éléments optgroup du select :
(J'ai utilisé du JQuery)

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
 
<html>
    <head>    
        <meta charset="UTF-8" />
        <title>Test</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>
    <body>
        <div>
            <label for="countries" class="required">Pays :</label>
            <select id="countries" name="countries" content-type="choices" trigger="true" target="department">
                <option value="1" >France</option>
                <option value="2" >Bénin</option>
            </select>
        </div>
        <div>
            <label for="department" class="required">Départements :</label>
            <select id="department" name="department" >
                <optgroup reference="1">
                    <option value="1" >Côtes d'amor</option>
                    <option value="2" >Finistère</option>
                    <option value="3" >Île-et-Vilaine</option>
                    <option value="4" >Morbihan</option>
                </optgroup>
                <optgroup reference="2">
                    <option value="5" >Littoral</option>
                    <option value="6" >Collines</option>
                    <option value="7" >Atlantique</option>
                    <option value="8" >Zou</option>
                </optgroup>
            </select>
        </div>
        <script> /* Insérer le code JavaScript ici */ </script>
    </body>
</html>

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
 
/*
  * trigger="true" permet de dire que c'est l'élément le plus haut qui fait varier toutes les autres listes
  * target=[id_cible] permet de spécifier la liste qui doit varier au changement de la sélection
  * reference=[id_reference] est l'id de l'élément parent qui déclenche la mise à jour de la liste
*/
 
//Fonction qui s'occupe de la mise à jour des listes
function updateSelectBox(object){
    // Object correspond au input qui déclenche l'action (pays dans notre cas)
    // On récupère le select (département) qui doit être mise à jour suite au changement du parent (pays)
    var target = $("#"+object.attr('target'));
 
    // On récupère tous les optgroup du select cible spécifié avec target (les optgroup du select département)
    var listGroups = target.find("optgroup");
 
    // On récupère le optgroup qui correspond à la valeur courante du select parent (pays)
    var validGroup = target.find("optgroup[reference='"+object.find(':selected').val()+"']");
 
    //On modifie la valeur courante du select cible (département)
    target.val(validGroup.find("option").val());
 
    //On cache tous les optgroup de département
    listGroups.hide();
 
    //On affiche uniquement le optgroup de département qui correspond à la valeur courante de pays
    validGroup.show();
 
    //On vérifie si la cible (département) doit déclencher une mise à jour d'une autre liste
    // Département peut par exemple déclencher la mise à jour des villes, et les villes déclenches celle des quartiers...
    if(target.attr('content-type')=='choices')
        target.change();
}
 
//On associe la fonction updateSelectBox à l'événement onchange des listes qui doivent déclencher des mises à jour d'autres listes
$("select[content-type='choices']").on('change',function(){
    updateSelectBox($(this));
});
 
//On fait la première mise à jour des
$(document).ready(function(){
    updateSelectBox($("select[trigger='true']"));
});

Si par exemple vous souhaitez ajouter les villes, il suffira d'ajouter un autre bloc select pour les villes, de renseigner son id à l'attribut target de département comme 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
 
<div>
    <label for="town" class="required">Villes :</label>
    <select id="town" name="town" content-type="choices">
        <optgroup reference="1"> <!-- 1 correspond à la valeur du département Côtes d'amor -->
            <option value="1" >Ville machin</option>
            <option value="2" >Ville consor</option>
        </optgroup>
        <optgroup reference="5"> <!-- 5 correspond à la valeur du département Littoral -->
            <option value="4" >Cotonou</option>
        </optgroup>
    </select>
</div>

Maintenant faut pas oublier de dire au select de département de faire varier les villes au changement en ajoutant content-type="choices" et target="town"Vous pouvez voir un petit démo ici : http://francis-walter.developpez.com...-without-ajax/

**NoSmoking** · 04/04/2016, 20h06

Bonjour à tous et merci pour vos retour.

ce n'est pas la région "Haut de France" mais "Hauts de France"

je n’avais pas corrigé le bon fichier, par contre Daniel.

Il y a aussi le département du "Creuset" au lieu du département de la "Creuse".

celle là je ne me l'explique pas mais je te rassure cela ne provient pas de l'INSEE

.

C'est corrigé dans la mise à jour.

Jérôme, pour en revenir à tes autres remarques

ne faudrait-il pas mettre en titre "...listes liées en cascade..." (ou un truc du genre)

Les listes liées sont toutes en « cascade » l'une entrainant l'autre c'est peut être juste la présentation qui donne un peu plus cette impression.
Un autre point est que souvent, lorsqu'il n'y a qu'un choix possible, on est quand même obligé de le sélectionner sur un bon nombre de site alors que dans mon exemple je le sélectionne par défaut ce qui fait que l'enchainement sur la liste suivante est réalisé.

tu ne traites pas d'une liste dépendant (par exemple) de DEUX ou PLUSIEURS autres listes.

le principe est le même et il suffit juste de faire abstraction du type de données pour voir que l'on est dans un schéma classique.

Imaginons que

nouvelle région soit modèle ;
ancienne région soit année ;
département soit couleur.

on retrouve bien le même schéma.

3/ il existe dans la FAQ JavaScript : Comment lier deux listes déroulantes entre elles ?
Je n'ai pas vu de lien dans l'article...

C'est prévu lorsque la mise à jour de la faq sera effective, car l’exemple actuel fourni ne me convient pas franchement, on en avait parlé ici Les formulaires (partie 2) Comment lier deux listes déroulantes entre elles ?

Quant au dernier lien que tu mets il ne m'a pas semblait opportun de le mettre car utilisant justement l'Ajax, donc difficile à introduire. De plus ce lien est épinglé ce qui en fait un incontournable.

Francis ton approche est pas mal non plus et tu fais bien de profiter de l'occasion pour nous en faire cadeau, cela fera une alternative de plus.

**MichaelREMY** · 07/04/2016, 11h40

j'approuve totalement cette démarche. ça devrait être un exercice de base pour tous ceux qui apprennent le javascript.
Avant de savoir le faire avec ajax, on doit savoir le faire sans (on doit même savoir le faire en algorithme même avant)

Pourquoi utiliser ajax quand on peut s'en passer!?

Le gain en terme de performance côté client est total, sans parler de l'expérience utilisateur qui est merveilleuse avec cette instantanéité alors qu'avec ajax on est sans arrêté en attente de délai de connexion,/serveur.

**SylvainPV** · 22/05/2016, 03h21

@MichaelREMY: deux raisons principales pour utiliser AJAX: la quantité de données et leur dynamisation.

Si par exemple on fait une liste déroulante liée pour cette fois trouver une commune en France et non plus un département, on comprend facilement qu'il vaut mieux charger 100 départements, puis en AJAX 300 communes rattachées au département choisi, plutôt que de faire télécharger au client les 36000 communes françaises dès le début.

De plus, vu la fréquence à laquelle les communes évoluent (des centaines de fusions/divisions/créations/renommages chaque année), ce serait très pénible de stocker cette liste dans le code client: ça impliquerait de relivrer l'application à chaque mise à jour, avec les problèmes que ça pose pour la gestion du cache. Alors que si c'est dans une base de données, on peut mettre à jour n'importe quand et très facilement.

Donc dans les faits, on a encore souvent besoin d'AJAX dans les cas d'utilisation classiques des listes liées. Ceci dit on peut facilement adapter à AJAX la méthode d'update des select expliquée dans l'article.

**MichaelREMY** · 22/05/2016, 09h09

vous vous trompez et votre exemple n'est pas bien choisi.
Les villes et communes et région n'évoluent pas tant que cela!
Vous vous faîtes biaisés par le nombre/quantité d'éléments en liste. 300 items ou 36000 ce n'est rien du tout voyons, surtout en format text. un fichier TEXT (les rendus php ou HTM ou js par exemple) sont 1000 fois plus rapidement transmis qu'un fichier binaire et surtout que x transitions ajax avec des delay de connexion,ping,server access,firewall,antivirus...
Avec les systèmes de docker, plugins externalisés, librairies js déportées sur des serveurs autre que le host naturel, tous les temps de chargement sont allongés maintenant donc autant limiter les nombres d'AR vers le serveur.

De plus vous ne dites pas vrai, on ne stoque pasl la liste sur le client (ne surtout jamais écrire une liste dans un js pur), elle est toujours fournie par le serveur (le js ou la partie js) est généré par du code dynamique serverside.

**SylvainPV** · 22/05/2016, 16h24

Il se trouve que je bosse précisément en ce moment avec les administrations publiques et la gestion des voiries sur des référentiels des communes, donc désolé, je ne pense pas me tromper vu que c'est moi qui gère ces mises à jour des dits référentiels.... Voilà le dernier annuel de l'INSEE. Pour mon client la mise à jour est hebdomadaire et essentielle à son activité.

Vous vous plaignez de l'impact en performances, je vous donne un cas concret où l'on passe de 36000 items à télécharger à 400, et vous me dites que 36000 items c'est rien du tout à télécharger. Alors en récupérer par paquets de 300 ça devrait être encore moins que rien du tout, non ? Donc n'avoir aucune incidence sur la réactivité.

Je n'ai jamais parlé de fichier binaire, en AJAX c'est 99% du temps du JSON donc du texte qui pèse à peine plus lourd que faire son propre format texte. Je ne sais pas où vous êtes allé chercher votre facteur 1000, mais peu importe que vous stockiez cette liste dans un JSON, un script inline ou un script externe, il faut bien à un moment qu'elle passe du serveur au client, avec toujours les mêmes conditions réseau. C'est vrai qu'il faut essayer de limiter le nombre de requêtes pour éviter la latence et l'overhead HTTP. Mais on parle de 100ms et 1500 bytes à tout casser pour du TCP/IPv4 en 3G, donc c'est négligeable à partir de données de plus de 10 ko.

Enfin je trouve ça assez hautain de votre part d'affirmer que je me trompe alors que c'est quelque-chose qui est mis en pratique depuis des années. Prenez un site e-commerce au hasard et regardez s'il récupère les noms de communes sans passer par AJAX. On se tromperait donc tous d'après vous ? Un peu d'humilité svp...

**MichaelREMY** · 22/05/2016, 17h20

Que l'on soit bien d'accord, je n'ai pas dit de ne pas gérer/stocker dynamiquement les données, non. j'ai dit qu'il était inutile et contre-performant de "binder" ces données en ajax plutôt que de les loader (à partir de source dynamique évidemment) d'une seule traite et de faire le filtrage/triage par du javascsript 100% offline.
Monsieur, je vous souhaite d’avoir un très bon timeout de sorti à tout endroit de la France sur tous les appareils client, d’avoir un sgbd qui soit tout le temps disponible et jamais sur-occupé par des requêtes inutiles, de ne jamais avoir des transactions hachées, de pas avoir de dockers qui ruinent vos script ajax, de ne pas avoir de firewall qui sont occupées à vérifier vos transactions inutiles, et aussi d’avoir des utilisateurs gentils qui ne saisiront jamais un code intrusif (sql injection par exemple) dans une liste ajax envoyée au serveur.

Enfin je trouve ça assez hautain de votre part d'affirmer que je me trompe alors que c'est quelque-chose qui est mis en pratique depuis des années. Prenez un site e-commerce au hasard et regardez s'il récupère les noms de communes sans passer par AJAX. On se tromperait donc tous d'après vous ? Un peu d'humilité svp...

Vous pensez donc avoir visité tous les sites internet e-commerce du monde entier pour dire cela. J'espère que lorsque vous serez sur un site sensible et constaterez qu'il y a une liste déroulante sans ajax, une liste avec du pur combo, vous vous questionnerez pourquoi.
Tiens je viens de reverifier, et Amazon (c'est un site de e-commerce non?) n'utilise pas ce système pour les cp-ville. ça ne vous interroge pas ?

Je n'ai pas dit que tout le monde se trompe, juste qu'il ne faut pas mettre du ajax là où il n'y en a pas besoin. La sélection d'une ville par filtrage de lettre se fait aussi sans ajax en javascript pur.
En gros, je privilégie ce genre de méthode :
https://blog.joshsoftware.com/2011/0...on-and-jquery/
plutôt que les méthodes qui vont aller interroger le serveur (pour rien d'après mon jugement).

Je n'ai pas répondu au sujet pour indiquer tel ou telle pratique ou conseiller, juste pour rappeler que l'ajax n'est pas une nécessite absolue, et qu'avant l'ajax il y a le dhtml offline...

**SylvainPV** · 22/05/2016, 21h57

Si le serveur a une latence de plus de 100ms pour pondre une requête JSON aussi simple, ce n'est pas AJAX le problème, c'est le serveur. Mais lui faire cracher les 36000 communes pour chaque utilisateur quand la majorité ne sont intéressés que par celles de leur département, je doute que ce soit l'idéal question perfs.

Amazon n'a pas du tout besoin de la liste des villes, juste d'une adresse postale, donc ça va être difficile de démontrer quoi que ce soit avec ça... Prenons plutôt les sites immobiliers, où récupérer la ville est utile. Je n'ai regardé que seloger.com, logic-immo et Paru-Vendu: tous utilisent AJAX... De même, leboncoin utilise AJAX pour trouver les communes par filtrage de lettre.

Mais au fond, on est d'accord: AJAX n'est pas une nécessité absolue. Pour des données de moins de 5-10ko, qui ne changent pas trop souvent, on peut envisager de les précharger en totalité. Pour tout les autres cas, paginer ou filtrer les données est essentiel, et AJAX est le mécanisme le moins disruptif à cet effet.

**MichaelREMY** · 22/05/2016, 23h16

Envoyé par SylvainPV

Mais au fond, on est d'accord: AJAX n'est pas une nécessité absolue. Pour des données de moins de 5-10ko, qui ne changent pas trop souvent, on peut envisager de les précharger en totalité. Pour tout les autres cas, paginer ou filtrer les données est essentiel, et AJAX est le mécanisme le moins disruptif à cet effet.

mais votre script ajax, sa librairie, sa requête, ses composantes de sécurité, son accès réseau (ses multiples mêmes), ses passages en log, ...etc nécessitent plus de 10ko en ressources, en bande passante en charge...etc c'est là que vous ne me comprenez pas. Des données transmises en fichiers linéaires ne consomment pas tant que ça (vous êtes biaisais pas ces chiffres quantitatifs). n'avez-vous jamais remarquez que la vitesse de téléchargement d'un fichier 100% textuel (un dump sql non compressé par exemple, ou un export .csv ou txt) de plusieurs 100 de Mo va extrement plus vite qu'un même fichier en binaire. Une page HTM de 10Ko ira plus vite qu'une page de 1Ko + 5 requetes ajax et ça consommera moins !!

Ainsi si je suis votre raisonnement et le démontre (avec humour) :
vous préférez construire une ligne de chemin de fer avec 10 gares d'arrêts entre monaco et paris pour transporter 5 containers en 5 fois plutôt qu'une seule ligne directe d'un train express à 5 wagons d'une ligne point à point (sans arrêt)! vous croyez que minimiser la quantité transportée par wagon coutera moins cher à la société.... cher monsieur vous oubliez le coût et les temps aux gares, les vérifications des billets à chaque point....,etc.

Comme je le dis plus haut, le coût de traitement de votre méthode ajax coutent plus cher en charge et en octets au serveur et au client et en bande passante que la quantité totale de données à transporter.

Personnellement un script ajax est utile quand :
- il nécessite de brasser de multiples données croisés (un process métier) et non pas juste un filtrage/pagination.
- nécessite de garder une confidentialité (ne pas fournir tout au client)
- quand le client (l’utilisateur) peut avoir à effectuer plusieurs choix successifs des données dans la même session)
- nécessite absolue d’apporter une UX avantageuse et ergonomique (donc pas juste pour être à la mode et faire comme tout le monde).

**SylvainPV** · 23/05/2016, 02h16

Récupérer un JSON en AJAX, c'est une broutille... ça se fait en une ligne de code en ES6:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fetch("/api/listeVilles/Nord").then(res => res.json()).then(function(villes){ ... })

Et pour les plus vieux navigateurs, ça peut se faire avec une petite fonction de dix lignes. Il faut m'expliquer d'où est-ce que vous sortez vos 10ko en bande passante suplémentaire.

Ensuite vous me refaites le coup du binaire, mais d'où est-ce que ça sort cette histoire de binaire ? L'AJAX c'est historiquement du XML et en pratique c'est 99% du temps du JSON, qui sont des formats textuels. Je ne sais pas non plus ce que vient faire Docker dans cette histoire.

Enfin, ce n'est pas une histoire de petits trains qui va occulter le fait que je vous ai trouvé 4 sites grands publics utilisant AJAX pour récupérer les noms des villes. Si vous continuez à prétendre que vous connaissez mieux votre sujet que toutes les équipes techniques réunies de ces sites, je pense qu'il vaut mieux arrêter cette discussion ici.

**MichaelREMY** · 23/05/2016, 08h49

je vous parlais de binaire car vous pensez que cette masse d'informations est longue à charger côté client (et donc qu'il font utiliser de l'ajax pour éviter ce loading au client) , et donc je vous parler du binaire car un fichier texte de 1Go va plus vite à télécharger qu'un fichier binaire de 1Go.

sujet clos pour moi.

Invité · 23/05/2016, 09h08

D'autant que vous êtes hors-sujet tous les deux !

Je rappelle le titre : "Créer des listes déroulantes liées entre elles sans utiliser Ajax"

N.B. Si vous pouviez arrêter de vous maintenant...

Invité · 21/10/2017, 11h08

Bonjour,

Suite à une autre discussion, voici une méthode simple pour remplir un input à partir d'une liste déroulante, sans Ajax.

Si on part de l'hypothèse qu'à UNE valeur du SELECT correspond UNE SEULE valeur pour l'input :

1/ on ajoute un attribut data-txt aux options du select, contenant la valeur correspondante de l'input :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
	<select id="myselect" name="Type" onchange="setinput(this.id, 'myinput')">
		<option value=" "> </option>
		<option value="1" data-txt="texte A">option 1</option>
		<option value="2" data-txt="texte B">option 2</option>
		<option value="3" data-txt="texte C">option 3</option>
		<option value="4" data-txt="texte D">option 4</option>
		<option value="5" data-txt="texte E">option 5</option>
	</select>
 
	<input id="myinput" value="" />

2/ on récupère le data-text de l'option sélectionnée... ...qu'on affiche dans l'input

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript">
function setinput(select_id, input_id)
{
	var sel = document.getElementById(select_id);
	var sel_attr = sel.options[sel.selectedIndex].dataset.txt; // on récupère le data-text de l'option sélectionnée...
	document.getElementById(input_id).value = sel_attr; // ...qu'on affiche dans l'input
}
</script>

Exemples d'utilisation :

afficher l'indicatif téléphonique en fonction du pays sélectionné
afficher le début du code postal en fonction du département sélectionné
afficher le code postal complet en fonction de la ville sélectionnée
...

Simple, efficace, et sans Ajax.

**NoSmoking** · 21/10/2017, 12h57

Salut Jérôme,
je ne saisis pas trop l'intérêt, pourquoi ne pas passer directement par la value du <select> ?

Invité · 21/10/2017, 15h52

Avoir des données différentes, et surtout indépendantes de la value du select !

exemple : pré-remplir le téléphone avec l'indicatif de pays

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
	<select id="idpaysId" name="paysId" onchange="setinput(this.id, 'idindicTel')">
		<option value=" "> </option>
		<option value="4" data-txt="+49">Allemagne</option>
		<option value="2" data-txt="+32">Belgique</option>
		<option value="1" data-txt="+33">France</option>
		<option value="7" data-txt="+41">Suisse</option>
..........
	</select>
 
	<input id="idindicTel" name="indicTel" value="" />

**thyboob** · 09/07/2018, 12h40

Message pour en priorité Francis Walter mais si quelqu'un a la solution je suis preneur :

Bonjour
je me permet de te soliciter suite à un code jquery que tu as mis dans la conversation de cet article (manipulation des éléments optgroup) un peu plus haut

référence de l'article : https://javascript.developpez.com/ac...-de-NoSmoking/

j'ai appliqué ce que tu mettais et tout fonctionne très bien, et cette fonction répond tres bien à ce que je voulais faire en JQUERY. j'ai même rajouter des sous sous catégorie etc.. et cela fonctionne

ça fonctionne, oui sous FF mais pas sous IE11 hors dans mon entreprise nous sommes malheureusement obligé de mettre IE par défaut faute à des applications interne qui fonctionne que sous IE

Aurais tu une astuce pour que ton scripte fonctionne sous IE11
merci par avance de ton aide

Thierry

**NoSmoking** · 09/07/2018, 19h12

Effectivement le script de Francis Walter ne fonctionne pas sous IE du fait qu'il ne reconnait pas le display:none sur les <optgroup> ou les <option>.

Une solution consisterait à créer des clones des <select> pour garder une trace de l'original et après de remplir l'original avec l'<optgroup> concerné.

Mais pourquoi ne pas adapter celui que je propose dans ce cas

[Article] Créer des listes déroulantes liées entre elles sans utiliser Ajax

JavaScript

Discussions similaires

Partager

Partager