web-dev-qa-db-fra.com

Élément <select> clone JQuery

Je souhaite cloner une entrée <select> en HTML à l'aide de JQuery.
Je ne suis pas sûr de savoir comment s'y prendre, alors j'ai pensé poser la question ici.

Particulièrement intéressé par la meilleure façon de l'écrire dans le document.

Mon élément select 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.

jqueryhtmlformsselectclone
17
diggersworld

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

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

appendTo (...) n'est qu'un moyen d'insérer les éléments clonés. D'autres méthodes peuvent être trouvées ici: http://api.jquery.com/category/manipulation/

29
Plaudit Design

Que dis-tu de ça?

<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.

12
user754952

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

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

vous pouvez choisir l'option attr true avec select change, puis utiliser le clonage 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);
});

0
user9054011

jQuery a une méthode clone intégrée. Il existe de nombreuses options pour savoir comment ajouter l’élément cloné. Le choix approprié dépend de votre application.

0
CuriousCurmudgeon