Dupliquez la case Sélectionner / Option lorsque l’utilisateur clique sur append davantage

J’ai un simple formulaire en ligne que j’essaie de créer. L’un des composants du formulaire est un menu déroulant (sélection / option) présentant les différents employés. Je l’ai déjà peuplé dans JS comme suit:

$('#employees').append($('', { value: 1, text: 'Adam' }));

Mais si l’utilisateur veut append un autre employé, j’ai un bouton sur lequel il peut cliquer, ce qui devrait append un autre menu déroulant identique à celui utilisé auparavant. Je me bats pour le faire correctement. J’ai essayé d’append simplement la ‘section de code’ entière à JS comme ceci:

 $(function() { $("#addMore").click(function(e) { e.preventDefault(); $("#fieldList").append("Employee"); $("#fieldList").append(""); $("#fieldList").append("Employee"); $("#fieldList").append(""); $("#fieldList").append("- Select Employee -"); $("#fieldList").append(""); $("#fieldList").append("
"); $("#fieldList").append("

"); }); });

Mais cela se traduit par ceci: Dupliqué la liste des employés

De toute évidence, quelque chose ne va pas. Le menu déroulant de section n’est pas interactif. Ma question est alors comment puis-je le faire correctement et comment puis-je le faire mieux?

CODE HTML

   Employee   - Select Employee -  
 
  Amount Paid

Utilisation du modèle https://html5up.net/story

EDIT https://jsfiddle.net/h3by56ws/ (“erreur”: “le formulaire shell ne valide pas)

Regardez ce violon. Pour cela, vous n’avez besoin que de quelques lignes de jQuery.

Gardez à l’esprit que vous ne devriez pas avoir plusieurs éléments DOM avec le même ID, vous voudrez donc modifier cela.

Si votre code HTML ressemble à ce qui suit, vous avez uniquement besoin de ce code Javascript:

 $(function() { $("#addMore").click(function(e) { var newSelect = $("#employees").clone(); newSelect.val(""); $("#select-wrapper").append(newSelect); }); });

   Employee   
 
   
  Amount Paid