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

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

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, 09h15

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, 09h46

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, 14h26

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, 19h06

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, 10h40

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.

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

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, 18h12

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

**thyboob** · 10/07/2018, 10h14

bonjour
merci pour votre réponse
en effet pourquoi je n'ai pas suivi votre tuto ? lol car je débute et j'ai pas tout compris au niveau des tables et me semblait plus compliquer
j'ai compris la logique et le chemin mais les pseudo table faut il que je créer des fichiers à côtés (si oui comment faut il les nommer) ou bien je les insère dans le même fichier de base etc...
Je vais m'y repencher dessus alors et je vais bien y arriver
Merci pour votre réponse

**thyboob** · 11/07/2018, 13h17

Bonjour
je viens de tester votre script et cela fonctionne
j'ai tout mis dans un fichier "js"à part et tout est ok
je vais l'adapter pour ce que je veux faire
Merci

**NoSmoking** · 11/07/2018, 14h08

Merci du retour, si tu as rencontré des soucis de compréhension, ou autre, n'hésite pas à le dire.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager