JQuery clone <select> élément

Je veux cloner un < sélectionner > entrer en HTML en utilisant JQuery.
Je ne suis pas sûr de savoir comment s'y prendre, alors j'ai pensé que je demanderais ici.JQuery clone <select> élément

Particulièrement intéressé par le meilleur moyen de réécrire dans le document.

Mon élément de sélection ressemble à ceci:

<select id="options"> 
    <option value="1">Opt 1</option> 
    <option value="2">Opt 2</option> 
    <option value="3">Opt 3</option> 
</select>

Merci.

Source

2010-10-11 diggersworld

Attention: l'attribut sélectionné ne sera pas copié à cause d'un bogue dans jQuery. L'élément selectedIndex est perdu après le clonage. Vous devrez définir manuellement la valeur sélectionnée à nouveau. http://bugs.jquery.com/ticket/9997 On dirait que jQuery pourrait ne pas le réparer bientôt. Bonne chance! – maartenmachiels

Voir: http://api.jquery.com/clone/

$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');

appendTo (...) qu'une seule façon d'insérer les éléments clonés. D'autres méthodes peuvent être trouvées ici: http://api.jquery.com/category/manipulation/

Source

2010-10-11 13:30:40

Merci, j'ai cassé votre réponse sur deux lignes parce que je la préfère de cette façon. – diggersworld

Note des docs sur jquery clone, il ne clone pas tout ce qui a été sélectionné: "Pour des raisons de performances, l'état dynamique de certains éléments de formulaire (par exemple, données utilisateur saisies dans textarea et sélections d'utilisateur faites à un select) n'est pas copié Lors du clonage d'éléments d'entrée, l'état dynamique de l'élément (par exemple, les données utilisateur saisies dans les entrées de texte et les sélections effectuées par l'utilisateur dans une case à cocher) est conservé dans les éléments clonés. " voir http://api.jquery.com/clone/ – dalore

jQuery a une méthode clone intégrée. Il ya beaucoup de options pour savoir comment ajouter l'élément cloné. Le bon choix dépend de votre application.

Source

2010-10-11 13:31:52 CuriousCurmudgeon

Que pensez-vous de cela?

<select id="options"> 
    <option value="1">Opt 1</option> 
    <option value="2">Opt 2</option> 
    <option value="3">Opt 3</option> 
</select>

// cible

<select id="options2"> 
</select> 

$('#options').find('option').clone().appendTo('#options2');

Merci.

Source

2011-11-15 01:05:59 user754952

Seul le problème avec la réponse acceptée est que si votre sélection contient des groupes d'opt, ils ne seront pas copiés. Dans ce cas, le moyen le plus simple que j'ai trouvé était de simplement faire ceci:

$('#options2').html($('#options').html());

Source

2013-03-05 18:08:26 jesal

Vous pouvez attr option sélectionnée vrai avec changement de sélection, puis utiliser clone est ok.

$("#options").off("change").on("change", function() { 
 
    var val = $(this).val(); 
 

 
    $(this).find("option[value=" + val + "]").attr("selected", true); 
 
});

$("#options").off("change").on("change", function() { 
 
    var val = $(this).val(); 
 

 
    $(this).find("option[value=" + val + "]").attr("selected", true); 
 
});

Source

2017-12-05 03:08:04 user9054011

Répondre

Questions connexes