aide menu deroulant html

aide menu deroulant html - HTML/CSS - Programmation

Marsh Posté le 06-05-2015 à 17:23:35    

bonjour je solicite votre aide pour un menu deroulant ,je voudrai si possible ajouter dans cette liste par exemple allemange depuis la page internet et non par le code merci
<form method="post" action="traitement.php">
   <p>
       <label for="pays">Dans quel pays habitez-vous ?</label><br />
       <select name="pays" id="pays">
           <option value="france">France</option>
           <option value="espagne">Espagne</option>
           <option value="italie">Italie</option>
           <option value="royaume-uni">Royaume-Uni</option>
           <option value="canada">Canada</option>
           <option value="etats-unis">États-Unis</option>
           <option value="chine">Chine</option>
           <option value="japon">Japon</option>
       </select>
   </p>
</form>
http://uploads.siteduzero.com/files/344001_345000/344554.png

Reply

Marsh Posté le 06-05-2015 à 17:23:35   

Reply

Marsh Posté le 06-05-2015 à 19:43:43    

tu dois utiliser du javascript :
 

Code :
  1. <button type="button" onclick="ajoute()">ajoute</button>
  2. <script>
  3. function ajoute() {
  4.     var x = document.getElementById("pays" );
  5.     var option = document.createElement("option" );
  6.     option.text = "allemange";
  7.     x.add(option);
  8. }
  9. </script>


Message édité par caps lock le 06-05-2015 à 19:44:11
Reply

Marsh Posté le 07-05-2015 à 01:27:26    

Merci de ta reponse mais c'etait pas tout a fait sa que j'attendais je me suis pas tres bien exprimé alors je reposte une autre photo et encore merci du coup de main
j'ecrit le nom d'un pays et il s'ajoute a la liste deroulante je precise que le code tel que ne fonctionne pas il faut du javascript je suppose  
http://img11.hostingpics.net/thumbs/mini_774078Sanstitre12.png
 
<!DOCTYPE html>
<html>
<body>
 <input type="text" id="myText" value="le pays que je veux ajouter dans la liste">
     <button type="button" onclick="ajoute()">ajoute</button>
 
   <form method="post" action="traitement.php">
   <p>
       <label for="pays">Dans quel pays habitez-vous ?</label><br />
       <select name="pays" id="pays">
           <option value="france">France</option>
           <option value="espagne">Espagne</option>
           <option value="italie">Italie</option>
           <option value="royaume-uni">Royaume-Uni</option>
           <option value="canada">Canada</option>
           <option value="etats-unis">États-Unis</option>
           <option value="chine">Chine</option>
           <option value="japon">Japon</option>
       </select>
   </p>
</form>  
   
   
 
</body>
</html>

Reply

Marsh Posté le 07-05-2015 à 13:55:41    

Bonjour,
 
Oui, je comprends où tu veux en venir, voilà le script donné plus tôt adapté à ta demande :
 

Code :
  1. <script>
  3. function ajoute() {
  4.     var new_country = document.getElementById("myText" ).getAttribute("value" );
  5.    
  6.     var option = document.createElement("option" );
  7.     var text_option = document.createTextNode(new_country);
  8.     option.setAttribute("value", new_country);
  9.     option.appendChild(text_option);
  10.  
  11.     var countries = document.getElementById("pays" );
  12.     countries.appendChild(option);
  13. }
  14. </script>


 
( j'ai remplacé la méthode add() par appendChild(), car cette première m'était totalement inconnue... )
 
Il me semble que ce code est bon, mais je suis novice en JavaScript ( et le DOM... Ce n'est pas ce que je gère le mieux ).
Du coup, si quelqu'un pourrait le confirmer, ça serrait bien, sinon, teste le et dit moi si c'est bon.  :)  
 
Je t'en remercie.


Message édité par grimmys le 08-05-2015 à 13:41:03
Reply

Marsh Posté le 07-05-2015 à 18:31:27    

ccia je te conseille d'apprendre à poser correctement tes questions et ne pas les modifier en cours de route, parce que je t'avais parfaitement répondu et et tu te mets à rajouter un textbox :o

Reply

Marsh Posté le 07-05-2015 à 19:16:11    

Non, il/elle a expliqué clair ce qu'il demandait depuis le début :
 
 

Citation :

je voudrai si possible ajouter dans cette liste par exemple allemange depuis la page internet et non par le code merci


 
Note bien le " par exemple " qui montre la demande d'un code qui s'adapte à n'importe quelle situation, et non simplement celle proposée.
 
La textbox a été rajouté après parce qu'il/elle a remarqué sa nécessité par rapport au code que tu lui proposais, la demande n'a aucunement été modifié, simplement approfondit.
 
EDIT : Ok, je ne connaissais pas l'ajout d'un élément option via la méthode add(), je me suis renseigné, mais pour autant, ton code ne gérait pas l'attribut value, pourtant essentiel afin d’effectuer un traitement php.


Message édité par grimmys le 07-05-2015 à 23:37:58
Reply

Marsh Posté le 08-05-2015 à 00:05:43    

merci de ta réponse grimmys  mais sa fonctionne pas ou alors ces moi qui déconne quelque part, quelqu'un pourrai tester svp,encore desolé pour le textbox,mais comme sa a était souligner j'avais stipuler par exemple qui sous entendait ajouter n'importe quel autre pays a partir du menu déroulant,si on peut se passer du textbox sa me va aussi encore merci a vous deux de vous pencher sur mon problème :jap:

Reply

Marsh Posté le 08-05-2015 à 13:40:41    

Pardon, simplement que j'avais oublié que le JavaScript est sensible à la casse :
 

Code :
  1. var new_country = document.getElementById("myText" ).getAttribute("value" );


 
Change juste cette ligne en mettant une majuscule à " mytext ".
J'ai testé le code, il fonctionne cette fois.
 
Désolé pour cette erreur minime, qui a rendu le script complètement faux...

Reply

Marsh Posté le 12-05-2015 à 02:04:52    

désoler du retard mais sa fonctionne toujour pas sa copie la value entre guillemet  <input type="text" id="MyText" value="pays que je veux ajouter"> et pas ma saisie dans le textbox :??:  
 
<!DOCTYPE html>
<html>
<body>
    <script>
    function ajoute() {
          var new_country = document.getElementById("MyText" ).getAttribute("value" );
       
        var option = document.createElement("option" );
        var text_option = document.createTextNode(new_country);
        option.setAttribute("value", new_country);
        option.appendChild(text_option);
     
        var countries = document.getElementById("pays" );
        countries.appendChild(option);
    }
    </script>
   
     
 
   
  <input type="text" id="MyText" value="pays que je veux ajouter">
     <button type="button" onclick="ajoute()">ajoute</button>
 
 
   <form method="post" action="traitement.php">
   <p>
       <label for="pays">Dans quel pays habitez-vous ?</label><br />
       <select name="pays" id="pays">
           <option value="france">France</option>
           <option value="espagne">Espagne</option>
           <option value="italie">Italie</option>
           <option value="royaume-uni">Royaume-Uni</option>
           <option value="canada">Canada</option>
           <option value="etats-unis">États-Unis</option>
           <option value="chine">Chine</option>
           <option value="japon">Japon</option>
       </select>
   </p>
</form>

Reply

Marsh Posté le 13-05-2015 à 00:10:08    

Code :
  1. var new_country = document.getElementById('MyText').value;

Reply

Marsh Posté le 13-05-2015 à 00:10:08   

Reply

Marsh Posté le 13-05-2015 à 16:14:35    

Ok, ça fonctionne avec l'accès direct mais pas avec la méthode... Je ne comprend pas du tout pourquoi...
 
M'enfin ton problème est résolu, désolé pour le mauvais script...
 
EDIT : Oui pardon, l'accès par la méthode donne accès uniquement à l'attribut écrit dans le code HTML initial, pour ça que ça ne pouvait pas fonctionner.


Message édité par grimmys le 13-05-2015 à 16:17:27
Reply

Marsh Posté le 14-05-2015 à 01:24:33    

merci beaucoup sa fonctionne :ange:  mais encore un petit souci ,j'aurai voulu que sa s'ajoute au texte html de la page si possible
 
                                                                         <option value="le texte que j'ai ecrit ds le textbox">  </option>
 

Reply

Marsh Posté le 14-05-2015 à 01:30:03    

Tu comprends ce que tu fais ? et ce que tu demandes ?
 
Si tu veux voir le code après avoir fait un ajout tu fais F12 (chrome ou firefox)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed