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

JavaScript Discussion :

[Javascript] Selection d'option dans un select et grisage d'options dans un autre


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    36
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 36
    Points : 33
    Points
    33
    Par défaut [Javascript] Selection d'option dans un select et grisage d'options dans un autre
    Bonjour bonjour.
    Je suis débutant en javascript (et mon niveau en html et php doit pas aller au-dessus de ce que je qualifierai "d'intermédiaire")
    J'ai un formulaire , qui a notamment 2 select.
    Les option de ces select sont récupérés a partir d'une base de données (MySQL pour me pas la nommer).
    J'ai un select "secteur" et un select "client".
    Ce que je voudrais, c'est que quand je clique sur un secteur, tous les clients non concernés se grisent (pour ne plus les sélectionner).

    J'ai tapé ce script, qui ne fonctionne ni sous firefox, ni sous msie, dans le head de ma page:

    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
    <script langage="javascript">
            function change(var a)
                    {
                    var le_segment = document.getElementById(a).text;
                    var nombre_clients = document.getElementByID('_client').length;
     
                    if (segment === 'tutto')
                            {
                            for (var i = 1 ; i <= nombre_clients ; i++)
                                    {
                                    document.getElementById('cli'+i.toString()).disabled='';
                                    }
                            }
                    else
                            {
                            for (var i = 1 ; i <= nombre_clients ; i++)
                                    {
                                    if (document.getElementById('cli'+i.toString()).segment == le_segment)
                                            {
                                            document.getElementById('cli'+i.toString()).disabled='';
                                            }
                                    else
                                            {
                                            document.getElementById('cli'+i.toString()).disabled='disabled';
                                            }
                                    }
                            }
                    }
            </script>
    Je l'appelle dans mon select "segment" de la manière suivante:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <td><select id="idsegment" name="_segment" onMouseDown="change(this.form._segment.options[this.form._segment.selectedIndex].id)">
    Les options de ce select ont cette forme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <option id="seg0" value="">tutto</option>
    Et pour le select des clients, il ressemble a ca:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <select id="idclient" name="_client">
    et ses options :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <option id="cli0" segment="" value="">tutte</option>
    Voila, si vous pouviez m'aider, ce serait vachement sympa.

  2. #2
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Points : 20 778
    Points
    20 778
    Par défaut
    Salut,

    Peux tu mettre un exemple de contenu pour voir...

    Et pense au balise code c'est plus lisible (là j'ai eu un peu de mal)

  3. #3
    Nouveau membre du Club
    Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    36
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 36
    Points : 33
    Points
    33
    Par défaut
    Désolé pour les balises, je suis aussi nouveau sur le fofo...
    Euh pour le contenu, que veux-tu dire?

  4. #4
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Points : 20 778
    Points
    20 778
    Par défaut
    par exemple tu mets pas de value au select c'est normal ?
    ce sera plus simple au lieu de jouer sur un id pour chaque option

  5. #5
    Nouveau membre du Club
    Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    36
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 36
    Points : 33
    Points
    33
    Par défaut
    Ah, le value de l'option?
    Oui, c'est normal, c'est ma première option, en fait les deux select dont je parle permettent de sélectionner des filtres parmis deux champs (segment d'activité et nom du client), qui permettent ensuite de filtrer une requete SQL, qui est une partie du résultat du formulaire.
    Dans les options du select "segment", t'auras des value du type "Grande distribution" ou "B2B", et dans les value des options du select "client" t'auras "microsoft", "apple", "zend",...

    (Evidemment j'ai pas donné les vrais secteurs ni les vrais clients, c'est juste pour te faire une idée de la forme des données)

  6. #6
    Nouveau membre du Club
    Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    36
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 36
    Points : 33
    Points
    33
    Par défaut
    J'ai avancé : je ne mets plus de script dans mon head, que j'appelle après dans mon body : j'y arrive pas (je dois avoir une erreur toute bete de syntaxe, enfin bref.)
    J'ai donc écrit ca dans mon select (celui des segments; je vous ai mis la version "dépliée" pour plus de lisibilité):
    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
     
    onClick=
    "if (this.form._segment.options[this.form._segment.selectedIndex].text!=\'tutto\')
            {
            for (var i=1;i<=this.form._client.length;i++)
                    {
                    if (this.form._client.options[i].segment==this.form._segment.options[this.form._segment.selectedIndex].text)
                            {
                            this.form._client.options[i].disabled=\'\'
                            }
                    else
                            {
                            this.form._client.options[i].disabled=\'disabled\'
                            }
                    }
            }
    else
            {
            for (var i=0;i<this.form._client.length;i++)
                    {
                    this.form._client.options[i].disabled=\'\'
                    }
            }"

    Ce script marche dans une certaine mesure:
    -Quand je clique sur "tutto" (tous les segments), je peux cliquer sur tous les clients.
    -Quand je sélectionne un segment, l'option "tutto" de mon select "client" est toujours cliquable, mais plus aucun client (ce qui n'est pas tout a fait ce que je veux).
    -Quand je re-clique sur "tutto" après avoir cliqué sur un segment, tous les clients sont a nouveau sélectionnables.

    Je suis donc sur la bonne voie, mais j'ai pas trop d'idée pour le bug du 2ème point...

    Bon j'ai imprimé ce source au cas où j'ai une idée lumineuse ce week-end; Si vous me répondez, ne vous en faites pas si je ne vous remercie pas avant lundi, j'ai pas le net dans mon appart.

    J'ai trouvé la cause :
    this.form._client.options[i].segment est undefined

  7. #7
    Nouveau membre du Club
    Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    36
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 36
    Points : 33
    Points
    33
    Par défaut
    Ca y est! ca marche! Enfin sous firefox, pas sous internet exploser...
    C'etait l'attribut "segment" que j'avais ajouté aux options de mon select "client" qui faisaient tout foirer (ha, DTD, quand tu nous tiens...)
    Désolé pour le triple post, voila le code qui marche (donc sous firefox):
    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
     
    onClick="
    if (this.form._segment.options[this.form._segment.selectedIndex].text!='tutto')
            {
            for (var i=1;i<=this.form._client.length;i++)
                    {
                    if (this.form._client.options[i].id==this.form._segment.options[this.form._segment.selectedIndex].text)
                            {
                            this.form._client.options[i].disabled=''
                            }
                    else
                            {
                            this.form._client.options[i].disabled='disabled'
                            }
                    }
            }
    else
            {
            for (var i=0;i<=this.form._client.length;i++)
                    {
                    this.form._client.options[i].disabled=''
                    }
            }"
    Et je vais essayer d'adapter ca a la sauce microsoft ()

    Au fait : sous msie, le bug est le suivant : où que je clique dans mon select "segment", ca ne fait rien au select "client".

    Je crois avoir trouvé d'où vient le problème avec msie : quand on met l'attribut disabled="" dans une balise, il la désactive...

  8. #8
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Points : 20 778
    Points
    20 778
    Par défaut
    Et si tu utilisais Ajax ??

  9. #9
    Nouveau membre du Club
    Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    36
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 36
    Points : 33
    Points
    33
    Par défaut
    Je veux bien, mais c'est que j'en ai jamais fait...
    Bon, je cherche sur le fofo, si j'arrive a en tirer quelque-chose, je post ici et eventuellement je mettrai le tag de tous les desirs.

    Apres quelques recherches :
    Premier point : je comprends rien a l'ajax (les quelques sites qui en parlent et qui en donnent des exemples, dont celui-ci, ne m'ont servi en rien).
    Deuxième point : le bug sous msie vient du fait qu'il ne veut pas éxécuter cette commande :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    echo '{this.form._client.options[i].disabled=\'disabled\';';
    echo 'this.form.test.value=\'else\';}
    Je vous l'ai mis tel que je l'ai écrit en php, avec le test que j'ai mis en dessous (il me retourne un else dans un champ texte des qu'il rentre dans le else) : avec ce test, je me suis rendu compte que mes tests (justemment) fonctionnent, mais que c'est bien cette commande qui foire sous ie.

    Nouvel edit :
    Ok, en y mettant un peu de bonne volonté, je viens de tomber sur cet article, qui explique le coeur de mon problème, a l'endroit où il parle des listes liées (et désolé d'avoir été cassant):
    http://siddh.developpez.com/articles/ajax/

  10. #10
    Nouveau membre du Club
    Profil pro
    Développeur informatique
    Inscrit en
    Mai 2006
    Messages
    36
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Mai 2006
    Messages : 36
    Points : 33
    Points
    33
    Par défaut Ca marche !!!
    Alleluiah!
    Joie et bonheur!
    Ca marche!

    Bon, j'ai mis un script dans mon head: j'ai adapté celui du tutoriel de ce site (celui que j'ai mis en lien sur le post précédent.
    En fait, je n'ai fait qu'adapter son exemple sur les listes liées (vu que c'était mon problème).

    Merci Ajax, merci siddh d'avoir fait ton super tutoriel, et merci Kerod de m'avoir orienté vers cette solution!

    Sur ce, tag résolu, et on retourne au boulot...

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

Discussions similaires

  1. Réponses: 19
    Dernier message: 17/03/2011, 14h30
  2. Réponses: 9
    Dernier message: 28/04/2009, 15h23
  3. Selectionner une option dans un select
    Par _beber85 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/04/2006, 16h48
  4. [javascript] Sélectionner l'option d'un select
    Par LE NEINDRE dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 26/10/2005, 17h35
  5. [html/css]coloration des options dans un select
    Par the_edge dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/05/2005, 15h19

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