Dupliquer un élément sur le bouton-pousser avec jQuery

Question

Je suis nouveau sur jQuery, et j'essaie de faire apparaître un autre menu déroulant identique chaque fois que l'utilisateur appuie sur un bouton. Je pensais que cela fonctionnerait, où #append est l'identifiant du bouton et #foo est l'id menu déroulant:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#append").click(function(){ 
      $("#foo").append($("#foo")); 
     }); 
    }); 
</script> 

Cependant, plutôt que de dupliquer le menu déroulant d'origine, il la fait disparaître! Qu'est-ce que je fais mal?

Answer 1

Vous voulez quelque chose comme ceci:

$(document).ready(function(){ 
    $("#append").click(function(){ 
    $("#foo").parent().append($("#foo").clone().removeAttr("id")); 
    }); 
}); 

.append() ajoute à la fin de l'élément auquel il a été appelé, dans ce cas vous voulez ajouter au parent, non intérieur l'élément <select> (comme vous voulez ajouter des options). En outre, vous voulez .clone() sauf si vous souhaitez déplacer l'instance d'origine. Assurez-vous également que vos identifiants sont uniques, j'enlèverais le id="foo" et lui donnerais une classe, ou enlèverais l'ID sur des copies, etc ... tout sauf des ID en double.

Answer 2

Si vous souhaitez dupliquer un élément utiliser clone():

$("#foo").clone().attr("id", "foo2").insertAfter("#foo"); 

Cela dit, ne le font pas essayer de créer votre propre menu. Utilisez un plugin existant (il y en a beaucoup, par exemple, superfish). Les menus ont des problèmes croisés de navigateur. Il n'y a aucune valeur à réinventer cette roue particulière.