Afficher et cacher une dropdownlist en javascript

Bonjour,

je code ma premiere application Web en MVC4 et pour cela j'aimerais afficher afficher dans mon ecran 4 dropdownlist.
Je m'explique:

Il faudrait que j'affiche une premiere DDL contenant une liste d'informations chargé d'une BDD.
En dessous de celle ci, je souhaiterais rajouter un bouton "ajouter DDL" qui me permettra de rajouter un DDL chargé avec les mêmes données aussi.
Le bouton "ajouter DDL" devra apparaître jusqu'à ce que ma 4eme DDL soit affiché.
De plus, a côte de ma derniere DDL affiché je souhaiterais rajouter un bouton "retirer DDL".

Ce qui veut dire que au depart, j'ai ma premiere DDL affiché avec en dessous le bouton ajouter.
Lorsque je clic sur le bouton ajouter je rajoute une DDL avec sur le cote un bouton retirer DDL et en dessous ajouter une autre DDL.
Si je clic encore une fois sur le bouton ajouter DDL alors une nouvelle DDL apparaît avec le bouton retirer DDL sur le cote. Par contre, sur ma 2eme DDL le bouton retirer DDL devra disparaître.

Cela doit me permettre d'afficher jusque 4 DDL.


Honnêtement, je ne même pas par où commencer.
Pourriez vous m'aiguiller et me dire ce que je dois faire pour cette mise en place?


Merci a tous.

ça m'a l'air compliqué d'utiliser autant de menus déroulants. à quoi servent ils ? montrez-nous un exemple

J'en ai besoin afin de remplir un formulaire. Ma bdd contient pour cet enregistrement jusque 4 Motifs de suppression.
Pour rendre ma page plus belle à la visu, je ne souhaite pas afficher les 4 motifs d'un coup mais plutôt le premier qui est obligatoire et aussi un bouton ajouter motif suppression.

Si tu as besoin de plus d'explications, n'hesites pas.

MErci merci

Pièce jointe 219517

Je souhaiterais qu'a l'affichage de ma page seul le motif 1 soit affiché. Ensuite quand je clic sur "+" je souhaiterais ajouter le motif 2 avec son bouton "+" et "X"(suppression sur le coté) et faire disparaître le bouton + du Motif 1 en remontant le Motif2.

Si je clic sur la suppression du Motif 2 je souhaiterais afficher le bouton "+" du motif 1 et faire remonter l'operateur.
De plus, si j'ai un affichage de Motif 1 et 2 et qu'en plus je clic sur le bouton "+" de 2 alors un Motif 3 apparaît avec un bouton + et X. Faire disparaître le bouton + et X du Motif 2.
Cela peut encore se faire jusqu'au motif 4.

Merci

donc chaque menu déroulant à le même contenu ?

regardez cela par exemple :
http://jsbin.com/pihitiluqe/edit?html,js,output

Ce n est pas mal mais j ai un petit soucis concernant les ddl.
En effet, le contenu est le même cependant les références pour le côté serveur ne sont pas les mêmes.
C est à dire que motif1 correspond a un champs motif1 qui sera testé à la validation de mon formulaire. Pour motif2 3 et 4 cela est pareil car avec votre cas ils ont la même référence. J utilise du mvc donc les ddl sont référence par un champ du modèle.

Si je m'exprime mal n hésitez pas à me le dire et j enverrais plus d infos.

Merci et votre exemple est vraiment cool mais ne répond pas totalement à mon besoin

Bonjour,
dans le cas de duplication de ligne, il est intéressant d'utiliser des NAME de la forme name="param[]", en effet si plusieurs éléments possèdent des NAME sous cette forme dans un <form> cela permet, coté serveur, de récupérer un tableau de données qui peut être traité grâce à l'utilisation d'une boucle.