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 :

Affichage dans un input text suivant sélection dans une liste


Sujet :

JavaScript

  1. #1
    Membre actif Avatar de baggie
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    755
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 755
    Points : 262
    Points
    262
    Par défaut Affichage dans un input text suivant sélection dans une liste
    Bonjour ^^

    je bloque sur un problème qui ne doit pas être des plus difficiles pour des javascripteurs plus doués que moi (ça non plus ça n'est pas bien difficile).

    J'ai une liste à choix multiple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <input type='text' class=d name='flag' id='flag' value=''>
    <select name='listflag' id='listflag' multiple='multiple' class=d onChange="choiceflag();">
    	<option>Option 1</option>
    	<option>Option 2</option>
    	<option>Option 3</option>
    </select>
    Quand je fais un choix, j'affiche ce choix dans le input d'à côté.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function choiceflag()
    {
    	var flagchoice = document.getElementById('listflag').value;
    	document.getElementById('flag').value = flagchoice;
    }
    Jusque là, pas de problème. Par contre, si je fais plusieurs choix dans ma liste (comme elle est multiple), comment puis-je faire pour tous les afficher dans mon input ? (séparés par une virgule si possible).

    Par exemple, je sélectionne "Option 1" et "Option 2" et j'affiche dans mon input text : Option 1,Option 2

    J'ai regardé du côté de split() ou implode() mais ça ne m'a pas l'air d'être bien ça, donc si vous avez une méthode ... =)

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    Donné aux moins deux fois aujourd'hui !!!


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var flagchoice = document.getElementById('listflag').options[document.getElementById('listflag').selectedIndex].value;
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    ou alors :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function choiceflag(ValSel)
    {
    	document.getElementById('flag').value = ValSel;
    }
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <select name='listflag' id='listflag' multiple='multiple' class=d onChange="choiceflag(this.value);">

    Curieusement le value est compris dasn la balsie mais pas en dehors ..
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre actif Avatar de baggie
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    755
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 755
    Points : 262
    Points
    262
    Par défaut
    Sauf que moi ça ne fonctionne pas ... =S

    [EDIt] Je teste la seconde solution [/EDIT]

    [EDIT2] Hum, ben non ça ne fonctionne pas. Il faut bien que je mette le multiple='multiple' pour que je puisse sélectionner plusieurs valeurs ? Enfin ça me parait logique. [/EDIT2]

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    parceque ton code html n'est pas correct tes options n'ont pas de value ...

    soit tu leur ajoutes un value soit tu remplace value par innerText ou innerHTML

    masi attention ton select étant multiple il ne prend que la première ...


    si tu veux une concatenation de la selection il va falloir boucler ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre actif Avatar de baggie
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    755
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 755
    Points : 262
    Points
    262
    Par défaut
    J'ai rajouté les value à mes options, c'est vrai que sur le coup je n'avais pas tilté.

    Mais au final ça ne me change rien vu que j'arrivais à afficher ce que je sélectionne.

    ton select étant multiple il ne prend que la première ...

    si tu veux une concatenation de la selection il va falloir boucler ...
    Si j'enlève le multiple, est-ce qu'avec une liste déroulante basique, il me "suffirait" de boucler tant qu'il y a un onChange (et donc sélection de quelque chose) ?

    Quant à la boucle je dois boucler sur quoi ? sur le onChange détecté ?

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    sur le oncahge tu boucles sur les options du select et tu ajoute les selected dans l'input ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
     
    <script type="text/javascript">
    function choiceflag()
    {  var flagchoice
    	for(i=0;document.getElementById('listflag').options[i];i++){
    	flagchoice += (document.getElementById('listflag').options[i].selected==true)?document.getElementById('listflag').options[i].value +" ;":'';
    	}
    	document.getElementById('flag').value = flagchoice;
    }
    </script>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Membre actif Avatar de baggie
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    755
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 755
    Points : 262
    Points
    262
    Par défaut
    C'est nickel SpaceFrog =D par contre un petit problème : quand je sélectionne la prmeière valeur (donc que je passe d'input vide à input avec une valeur), il m'écrit un undefined devant oO

    Exemple : undefinedOption1
    Mais si je rajoute après option 2, je n'aurai pas le undefined devant Option2
    Ca n'arrive que si je sélectionne une seule valeur.

    Sinon question à part :

    Le + signifie quoi exactement ? Qu'on ajoute ce qu'il y a déja ou ... ??

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    mets
    += ajoute au contenu existant
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  10. #10
    Membre actif Avatar de baggie
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    755
    Détails du profil
    Informations personnelles :
    Âge : 35
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 755
    Points : 262
    Points
    262
    Par défaut
    Ah ouai ça j'aurai pu le trouver moi-même
    Et merci pour l'info du += ^^

    Merci beaucoup c'est impeccable !

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

Discussions similaires

  1. Réponses: 29
    Dernier message: 03/11/2005, 10h37
  2. copier coller dans un <input text>
    Par denn dans le forum ASP
    Réponses: 2
    Dernier message: 20/09/2005, 16h51
  3. modifier la couleur d'un texte dans un input text
    Par mic79 dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 05/01/2005, 16h45
  4. Afficher un varchar complet dans un input text
    Par PrinceMaster77 dans le forum ASP
    Réponses: 4
    Dernier message: 25/06/2004, 12h17

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