Remplir un champs text à partir de plusieurs listes déroulantes

Fermé
Othedd Messages postés 4 Date d'inscription mardi 4 octobre 2016 Statut Membre Dernière intervention 4 octobre 2016 - 4 oct. 2016 à 16:41
Othedd Messages postés 4 Date d'inscription mardi 4 octobre 2016 Statut Membre Dernière intervention 4 octobre 2016 - 4 oct. 2016 à 18:31
Bonjour tout le monde,

Es que quelqu'un peut m'aider a crée un texte depuis des listes déroulantes sur HTML, ( c'est pour crée un jeu pour mon fils ) :p
je suis nul en HTML


MERCI BEAUCOUP

3 réponses

jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
4 oct. 2016 à 16:44
Bonjour,

Pour commencer... as tu déjà créé tes listes déroulantes ?
Peux tu nous en montrer le code ?

0
Othedd Messages postés 4 Date d'inscription mardi 4 octobre 2016 Statut Membre Dernière intervention 4 octobre 2016
Modifié par jordane45 le 4/10/2016 à 17:00
Bonjour Jordane!

voici la liste
<select> 
   <option>papa</option> 
   <option>maman</option> 
   <option selected="selected">moi</option> 
   <option>frère</option> 
   <option>sœur</option> 
   <option>cousin</option> 
   <option>cousine</option> 
   <option>grand père</option> 
   <option>grande mère</option> 
</select> 

et d'autre liste pareils pour des objets, couleurs..

Le principe c'est qu'au finale quand il fait les choix le résultats des choix s'affiche dans une zone texte qu'il peut copier.

Merci beaucoup

EDIT : Ajout des balises de code
0
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
4 oct. 2016 à 17:02
Pour commencer tu dois mettre un attribut ID à tes select (histoire de pouvoir les identifier)
Ensuite, il faut que tu nous dises à quel endroit tu souhaites placer les textes une fois sélectionnes... ( un DIV avec un ID par exemple ou un Textarea ... ou autre chose à toi de voir).
Et enfin... il faudra passer par du JAVASCRIPT pour pouvoir récupérer les données de tes listes et les placer dans ta zone d'affichage
0
Othedd Messages postés 4 Date d'inscription mardi 4 octobre 2016 Statut Membre Dernière intervention 4 octobre 2016 > jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024
Modifié par jordane45 le 4/10/2016 à 17:31
D'accord pour les ID :
<select id="Membre de famille" onchange="VerifListe();"> 
   <option>papa</option> 
   <option>maman</option> 
   <option selected="selected">moi</option> 
   <option>frère</option> 
   <option>sœur</option> 
   <option>cousin</option> 
   <option>cousine</option> 
   <option>grand père</option> 
   <option>grande mère</option> 
</select> 


pour le endroit je connais pas la différence entre DIV et textarea, :p l'important c'est une zone text
peux tu aussi m'expliquer comment je doit passer par JAVASCRIPT ou sinon me donner un exemple, MERCI


EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.


Cordialement
0
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
Modifié par jordane45 le 4/10/2016 à 17:41
Evites d'utiliser des espaces dans les ID ( au même titre qu'on évite les caractères accentués et les caractères spéciaux.)

Pour ce qui est de l'exemple... voici :
<html>
<head>
  <title>TEST</title>
  <meta charset="utf8">
 </head>
 <body>
 
 <select id="Membre_famille" > 
   <option>papa</option> 
   <option>maman</option> 
   <option selected="selected">moi</option> 
   <option>frère</option> 
   <option>sœur</option> 
   <option>cousin</option> 
   <option>cousine</option> 
   <option>grand père</option> 
   <option>grande mère</option> 
</select> 


 <select id="Membre_famille_2" > 
   <option>papa</option> 
   <option>maman</option> 
   <option selected="selected">moi</option> 
   <option>frère</option> 
   <option>sœur</option> 
   <option>cousin</option> 
   <option>cousine</option> 
   <option>grand père</option> 
   <option>grande mère</option> 
</select> 

<div id="zone_affichage">

</div>

<input type="button" value="Afficher " onclick="go();">
 
 <script type="text/javascript">
  function go(){
    var liste1 = document.getElementById('Membre_famille');
 var liste2 = document.getElementById('Membre_famille_2');
  
    var choix1 =  liste1.options[liste1.selectedIndex].text;
    var choix2 =  liste2.options[liste2.selectedIndex].text;
 
 console.log("vous avez choisi :" + choix1 + " et " + choix2);
 // AFFICHAGE
    var zoneAffichage = document.getElementById('zone_affichage');
  zoneAffichage.innerHTML = "vous avez choisi :" + choix1 + " et " + choix2;
  }
 </script>
 
 </body>

</html>



NB: A l'avenir, merci d'utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code



Cordialement, 
Jordane                                                                 
0
Othedd Messages postés 4 Date d'inscription mardi 4 octobre 2016 Statut Membre Dernière intervention 4 octobre 2016
4 oct. 2016 à 18:31
Merci beaucoup Jordane c'est exactement ce que je cherche,

Cordialement
0