ajouter des listes Dynamiquement déroulantes à la forme html

Question

Je le code suivant:

http://jsfiddle.net/JpYGg/4/

Il ne semble pas fonctionner sur jsFiddle mais il fonctionne presque bien sur une page Web normale.

J'ai trouvé le code en ligne, mais je l'ai un peu modifié et j'essaie d'ajouter un bouton à côté de la supprimer pour ajouter une nouvelle zone de texte en dessous de celle-ci. J'essaye d'appeler la fonction addNew() pour cela mais il semble juste continuer au lieu d'en ajouter seulement un?

L'autre chose que je cherche à tweak est que cela ajoute une nouvelle zone de texte, mais ce que je vise est d'ajouter 3 menus déroulants évidemment:/

Plus précisément, ce serait le suivant:

<select id="tags" name="tags" class="tags"> 
<option value="tags" selected="selected">tags</option> 
<option value="agent">agent</option> 
<option value="extension">extension</option> 
<option value="fileversion" >fileversion</option> 
</select> 

<select id="operands" name="operands" class="operands"> 
<option>operands</option> 
</select> 

<select id="values" name="values" class="values"> 
<option>values</option> 
</select> 

Je ne suis pas sûr de la meilleure façon de le faire - par exemple peut-être mettre tout cela dans une div et créer une variable basée sur cette div et en dupliquant cela dans la fonction addNew?

Toute aide grandement appréciée.

Cordialement, Martin

Answer 1

http://jsfiddle.net/JpYGg/6/

Un changement important:

newAddButton.onclick = addNew; 

Vous faisiez quelque chose comme newAddButton.onclick = addNew(){}; qui est une erreur, soit vous exécutez la fonction, à savoir addNew(), ou faire une fonction anonyme, c'est-à-dire function(){}, bien qu'il n'y ait pas de addNew(){} (il y a quelque chose de similaire en Java, mais c'est allié sans rapport). Oh et un autre: la différence que vous avez vu entre votre site et jsfiddle, c'est parce que javascript a exécuté onLoad, ce qui signifie que jsfiddle va l'envelopper, et globals, comme la fonction addNew ne sera pas visible depuis votre événement inline gestionnaires (que vous devriez probablement changer de toute façon). Notez que je l'ai sur no wrap sur mon extrait.

Il y a aussi quelques changements insignifiants (comme l'incrément du compteur, et les points-virgules) qui ne l'ont pas brisé, mais qui sont juste plus mon style. En ce qui concerne l'ajout d'une nouvelle boîte à outils et pas seulement une zone de texte, bienvenue à la guerre des flammes (qui est peut-être maintenant très mort) sur la bonne augmentation DOM. Il y a deux façons d'aborder cela (il y en a plus, mais elles se résument toutes à deux méthodes), soit construire le nouveau <div> comme vous le faites, avec beaucoup d'appels appendChild et createElement, qui est le "nettoyeur" "méthode qui utilise des fonctions DOM standard. Ou vous pouvez utiliser innerHTML, qui accepte une chaîne géante et fera l'analyse elle-même. La première méthode, en plus d'être "plus standard", signifie que l'injection de valeur est également plus formelle, donc si vous voulez changer un attribut par exemple, vous le faites de manière codée en javascript, par opposition à l'intégration la valeur dans une chaîne et laisser le navigateur l'analyser.

L'avantage majeur de la deuxième méthode est qu'elle est beaucoup plus rapide. Beaucoup plus vite.Cela ne ferait pas de différence pour quelques listes déroulantes, mais quand vous avez beaucoup de choses à rendre chaque fonction DOM est un peu plus lente, et plus encore si les choses doivent être rendues entre les deux.

Vous pouvez donc soit étendre votre méthode actuelle et ajouter les listes déroulantes, soit utiliser l'approche "backdoor" innerHTML. Pour l'instant, faites ce qui vous semble le mieux, optimisez/changez les choses seulement si vous en avez besoin (ce que vous n'aurez probablement pas).

Espérons que ce soit suffisant pour vous lancer.