AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    (Onyx) Une liste déroulante avec apparition d'une variable

    Myosotis
    Myosotis
    FémininAge : 24Messages : 101

    Mar 16 Aoû 2016 - 14:34

    Comment créer une liste déroulante avec l'apparition de variables ?



    Bonjour !

    Retrouvez la feuille de route d'Avatars ici, son contexte là et son système de jeu ici.

    Je ne sais pas si mon titre est très clair, donc place aux explications : j'aimerais créer une liste déroulante comme celle ci...

     


         

         
     




    Code :

    ...mais un peu plus complexe. En effet, j'aimerais que selon l'option sélectionnée par le lecteur, s'affiche à la suite, dans un champ à droite de la liste, une "variable", qui donc différerait selon l'option.
    Toutefois, je ne désire pas récupérer les informations envoyées ni rien. Cette demande n'a donc rien d'une demande de formulaire. En fait, c'est pour rendre un texte plus interactif : mettons que j'écrive un dialogue, et que le narrateur s'adresse au lecteur, il va lui demander son âge. Le lecteur va donc pouvoir "répondre" avec cette liste, mais sa réponse n'aura pas d'impact sur la suite du discours écrit au préalable. Par conte, sa réponse affichera un commentaire de la part du narrateur, par exemple :

    - J'ai l'âge d'être grand père !
    - Vous commencez à sucrer des fraises, mon vieux !


    (Cette dernière étant le commentaire du narrateur, qui ensuite reprend le fil de son discours. C'est donc seulement du ludique)

    Bon, j'espère ne pas vous avoir perdu et que c'est assez clair ! Je voulais donc savoir s'il existait un moyen de faire ca, et si c'était compliqué ou non :')

    Merci beaucoup pour l'attention que vous porterez à ma demande,
    Myo.
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 29 Aoû 2016 - 2:00

    Salut!

    Est-ce que le sujet est toujours d'actualité? Merci de donner des nouvelles idéalement au moins une fois par semaine pour que le sujet ne soit pas archivé Wink

    PS : Et j'ai une idée que je vais essayer si c'est toujours d'actualité. Et j'aimerais savoir, est-ce que tu mets le code dans une page html ou est-ce que c'est dans un message? Aussi, est-ce que la première réponse s'affiche par défaut ou non?

    Edit : C'est fini, j'attends juste tes réponses ^^



    Myosotis
    Myosotis
    FémininAge : 24Messages : 101

    Mer 31 Aoû 2016 - 13:18

    Bonjour !
    Merci beaucoup pour la réponse, je désespérais de trouver quelqu'un qui s'y intéresse ^^ <3
    Je mets le code dans une page mais a priori ce ne serait pas un problème de le mettre dans une page HTML. Et non, la première réponse ne s'affiche pas par défaut, c'est "Sélectionner une action" qui s'affiche au départ ^w^
    Je note pour les nouvelles, je tâcherai d'en donner plus à l'avenir !
    Encore merci <3
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 31 Aoû 2016 - 20:26

    Salut !

    Alors le résultat est ici, c'est ce que tu voulais?
    http://forum-test-5.forum-canada.com/t85-test-avec-options



    Myosotis
    Myosotis
    FémininAge : 24Messages : 101

    Mer 31 Aoû 2016 - 22:22

    Wouawh, je m'incline et te baise les pieds ! C'est exactement ce que je voulais, je ne pouvais pas rêver mieux. Sincèrement, big up à toi! :lovebomb: Tu m'ôtes une sacrée épine du pied :heart:
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 1 Sep 2016 - 0:27

    C'est un plaisir ^^

    Voilà le javascript à mettre en placement "sur les sujets" :
    Code:
    $(function(){
      $('.select_options').change(function(){
        $(this).parent().next().find('.reponse').css('display', 'none');
        var optionchoisie = $(this).find('option:selected').val();
        if (optionchoisie.length > 0) {
          $(this).parent().next().find('.'+optionchoisie).css('display', 'inline');
        }
      });
    });

    Ensuite, quand tu postes ton messages avec les options, cela doit être fait sous ce format (bref, le "value" de l'option 1 est pareil que la deuxième classe du span qui contient la réponse et ainsi de suite) :
    Code:
    <div>Texte texte texte quelconque genre paragraphe.
    <label for="truc">Question</label>
    <select class="select_options" name="truc" id="truc"><option>Sélectionner une action</option><option value="option1">Option 1</option><option value="option2">Option 2</option><option value="option3">Option 3</option></select></div><div class="select_reponse"><span class="reponse option1">Réponse 1</span><span class="reponse option2">Réponse 2</span><span class="reponse option3">Réponse 3</span>
    Texte texte texte texte quelconque</div>

    Ensuite, tu rajoutes ceci dans le CSS et c'est tout :
    Code:
    /*Cache les réponses*/
    .reponse{
      display: block;
    }



    Myosotis
    Myosotis
    FémininAge : 24Messages : 101

    Dim 4 Sep 2016 - 17:14

    C'est merveilleux ! *-* Merci beaucoup.

    Est ce que je peux demander à ce que ce topic reste en place, sans être archivé, une ou deux semaines? ^w^ Le temps que je m'imprègne de ces explications et que je les applique (j'ai pas le temps dans les jours qui viennent :/ )
    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Nov 2024 - 14:12