Listes liées avec JQuery Chained

Version imprimable

Bonjour,

Je me frotte à un problème de listes liées.

Aucun problème au niveau de l'affichage de select2 en fonction de select1, mais j'aimerais, qu'au chargement de la page, select2 affiche par défaut la totalité des options disponibles.

Voici le code (les options sont normalement extraites d'une base de données) :

Code:

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
 
<!doctype html>
<html>
<head>
    <title>Liste Liées</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.chained.js"></script>
    <script type="text/javascript">
     $(function(){
     $("#metier").chained("#domaine_activite");
     });
    </script>
</head>
<body>
    <div class="recherche_emploi_1">
        <label for="domaine_activite">Votre domaine d'activité</label><br />
        <select name="domaine_activite" id="domaine_activite">
            <option value="">Tous les domaines d'activité</option>
            <option value="A">A : Agriculture et pêche, espaces naturels et espaces verts, soins aux animaux</option>
            <option value="B">B : Arts et façonnage d'ouvrages d'art</option>
            <option value="C">C : Banque, assurance, immobilier</option>
            <option value="D">D : Commerce, vente et grande distribution</option>
            <option value="E">E : Communication, média et multimédia</option>
            <option value="F">F : Construction, bâtiment et travaux publics</option>
            <option value="G">G : Hôtellerie- restauration tourisme loisirs et animation</option>
            <option value="H">H : Industrie</option>
            <option value="I">I : Installation et maintenance</option>
            <option value="J">J : Santé</option>
            <option value="K">K : Services à la personne et à la collectivité</option>
            <option value="L">L : Spectacle </option>
            <option value="M">M : Support à l'entreprise</option>
        </select>
    </div>
    <div class="recherche_emploi_2">
            <label for="metier">Votre métier</label><br />
            <select name="metier" id="metier">
                <option value="">Tous les métiers</option>
                <option value="A11" class="A">A11 : Engins agricoles et forestiers</option>
                <option value="A12" class="A">A12 : Espaces naturels et espaces verts</option>
                <option value="B11" class="B">B11 : Arts plastiques</option>
                <option value="B12" class="B">B12 : Céramique</option>
                <option value="C11" class="C">C11 : Assurance</option>
                <option value="C12" class="C">C12 : Banque</option>
                <option value="D11" class="D">D11 : Commerce alimentaire et métiers de bouche</option>
                <option value="D12" class="D">D12 : Commerce non alimentaire et de prestations de confort</option>
                <option value="E11" class="E">E11 : Edition et communication</option>
                <option value="E12" class="E">E12 : Images et sons</option>
                <option value="F11" class="F">F11 : Conception et études</option>
                <option value="F12" class="F">F12 : Conduite et encadrement de chantier - travaux</option>
                <option value="G11" class="G">G11 : Accueil et promotion touristique</option>
                <option value="G12" class="G">G12 : Animation d'activités de loisirs</option>
                <option value="H11" class="H">H11 : Affaires et support technique client</option>
                <option value="H12" class="H">H12 : Conception, recherche, études et développement</option>
                <option value="I11" class="I">I11 : Encadrement</option>
                <option value="I12" class="I">I12 : Entretien technique</option>
                <option value="J11" class="J">J11 : Praticiens médicaux</option>
                <option value="J12" class="J">J12 : Praticiens médico-techniques</option>
                <option value="K11" class="K">K11 : Accompagnement de la personne</option>
                <option value="K12" class="K">K12 : Action sociale, socio-éducative et socio-culturelle</option>
                <option value="L11" class="L">L11 : Animation de spectacles</option>
                <option value="L12" class="L">L12 : Artistes - interprètes du spectacle</option>
                <option value="M11" class="M">M11 : Achats</option>
                <option value="M12" class="M">M12 : Comptabilité et gestion</option>
                <option value="N11" class="N">N11 : Magasinage, manutention des charges et déménagement</option>
                <option value="N12" class="N">N12 : Organisation de la circulation des marchandises</option>
            </select>
    </div>
</body>
</html>

Je peux sans soucis changer de librairie JS ou migrer vers de l'ajax, si cela n'est pas possible avec Chained. J'aimerai surtout savoir quelle technique me permettra d'afficher le select2 non vide au chargement de la page.

Merci par avance

Bonsoir

Il faut modifier le plugin.

Je n'ai fait qu'un seul test avec la version modifiée, tout semble fonctionner normalement, mais je ne garantis rien.

Code:

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
/*
 * Chained - jQuery / Zepto chained selects plugin
 *
 * Copyright (c) 2010-2013 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/chained
 *
 * Version : 0.9.9
 * 
 * Version modifiée le 2014-01-30 par Daniel Hagnoul
 * Suppression de "Force updating the children"
 */
 
;(function($, window, document, undefined) {
    "use strict";
 
    $.fn.chained = function(parent_selector, options) {
 
        return this.each(function() {
 
            /* Save this to child because this changes when scope changes. */
            var child   = this;
            var backup = $(child).clone();
 
            /* Handles maximum two parents now. */
            $(parent_selector).each(function() {
                $(this).bind("change", function() {
                    updateChildren();
                });
 
                /* Force IE to see something selected on first page load, */
                /* unless something is already selected */
                if (!$("option:selected", this).length) {
                    $("option", this).first().attr("selected", "selected");
                }
 
                /* Force updating the children. */
                //updateChildren();
            });
 
            function updateChildren() {
                var trigger_change = true;
                var currently_selected_value = $("option:selected", child).val();
 
                $(child).html(backup.html());
 
                /* If multiple parents build classname like foo\bar. */
                var selected = "";
                $(parent_selector).each(function() {
                    var selectedClass = $("option:selected", this).val();
                    if (selectedClass) {
                        if (selected.length > 0) {
                            if (window.Zepto) {
                                /* Zepto class regexp dies with classes like foo\bar. */
                                selected += "\\\\";
                            } else {
                                selected += "\\";
                            }
                        }
                        selected += selectedClass;
                    }
                });
 
                /* Also check for first parent without subclassing. */
                /* TODO: This should be dynamic and check for each parent */
                /*       without subclassing. */
                var first;
                if ($.isArray(parent_selector)) {
                    first = $(parent_selector[0]).first();
                } else {
                    first = $(parent_selector).first();
                }
                var selected_first = $("option:selected", first).val();
 
                $("option", child).each(function() {
                    /* Remove unneeded items but save the default value. */
                    if ($(this).hasClass(selected) && $(this).val() === currently_selected_value) {
                        $(this).prop("selected", true);
                        trigger_change = false;
                    } else if (!$(this).hasClass(selected) && !$(this).hasClass(selected_first) && $(this).val() !== "") {
                        $(this).remove();
                    }
                });
 
                /* If we have only the default value disable select. */
                if (1 === $("option", child).size() && $(child).val() === "") {
                    $(child).attr("disabled", "disabled");
                } else {
                    $(child).removeAttr("disabled");
                }
                if (trigger_change) {
                    $(child).trigger("change");
                }
            }
        });
    };
 
    /* Alias for those who like to use more English like syntax. */
    $.fn.chainedTo = $.fn.chained;
 
    /* Default settings for plugin. */
    $.fn.chained.defaults = {};
 
})(window.jQuery || window.Zepto, window, document);

31/01/2014, 08h46
Ovita

Bonjour,

Merci beaucoup pour cette solution qui fonctionne comme je l'espérais !

Bonne journée !