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

jQuery Discussion :

Listes liées avec JQuery Chained


Sujet :

jQuery

  1. #1
    Candidat au Club
    Profil pro
    Intégrateur Web
    Inscrit en
    Août 2009
    Messages
    2
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Août 2009
    Messages : 2
    Points : 2
    Points
    2
    Par défaut Listes liées avec JQuery Chained
    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 : 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
     
    <!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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    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 : 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
    /*
     * 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);

  3. #3
    Candidat au Club
    Profil pro
    Intégrateur Web
    Inscrit en
    Août 2009
    Messages
    2
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Août 2009
    Messages : 2
    Points : 2
    Points
    2
    Par défaut
    Bonjour,

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

    Bonne journée !

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

Discussions similaires

  1. [MySQL] 3 listes liées avec PHP/MYSQL
    Par sadigoun dans le forum PHP & Base de données
    Réponses: 12
    Dernier message: 22/10/2008, 12h41
  2. Listes liées avec rechargement spécifique
    Par jpascal dans le forum Langage
    Réponses: 2
    Dernier message: 05/04/2008, 02h32
  3. [AJAX] Listes liées avec Ajax
    Par Zak_92 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 15/08/2007, 12h19
  4. [1.0.12]Listes liées avec Javascript
    Par slim dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 5
    Dernier message: 08/06/2007, 23h07
  5. [AJAX] Listes liées
    Par oranocha dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 13/02/2007, 06h59

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