JQuery clon <select> elemento

Quiero clonar una entrada <select> en HTML usando JQuery.
No estoy seguro de cómo hacerlo, así que pensé en preguntar aquí.JQuery clon <select> elemento

Particularmente interesado en la mejor manera de escribirlo de nuevo en el documento también.

Mi elemento de selección es el siguiente:

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

Gracias.

Fuente

2010-10-11 diggersworld

Atención: el atributo seleccionado no se copiarán a causa de un error en jQuery. El selectedIndex se pierde después del clon. Deberá configurar manualmente el valor seleccionado nuevamente. http://bugs.jquery.com/ticket/9997 Parece que jQuery podría no solucionarlo pronto. ¡Buena suerte! – maartenmachiels

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

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

appendTo (...) es sólo una forma de insertar los elementos clonados. Otros métodos se pueden encontrar aquí: http://api.jquery.com/category/manipulation/

Fuente

2010-10-11 13:30:40

Gracias, he roto su respuesta en dos líneas porque lo prefiero de esa manera. – diggersworld

Nota de los documentos en jquery clon, no clonará nada seleccionado: "Por razones de rendimiento, el estado dinámico de ciertos elementos del formulario (p. Ej., Datos de usuario escritos en textarea y selecciones del usuario realizadas a una selección) no se copia a los elementos clonados. Al clonar elementos de entrada, el estado dinámico del elemento (p. ej., datos de usuario escritos en entradas de texto y selecciones de usuarios realizadas en una casilla de verificación) se conserva en los elementos clonados ". ver http://api.jquery.com/clone/ – dalore

jQuery tiene un método clone incorporado. Hay muchos options sobre cómo volver a agregar el elemento clonado. La elección correcta depende de su aplicación.

Fuente

2010-10-11 13:31:52 CuriousCurmudgeon

¿Qué tal esto?

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

// objetivo

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

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

Gracias.

Fuente

2011-11-15 01:05:59 user754952

El único problema con la respuesta aceptada es que si su selección contiene grupos optg no se copiarán. En ese caso, la manera más fácil que encontré fue simplemente hacer esto:

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

Fuente

2013-03-05 18:08:26 jesal

puede seleccionado cierto con el cambio de selección attr opción, a continuación, utilizar el clon está bien.

$("#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); 
 
});

Fuente

2017-12-05 03:08:04 user9054011

Respuesta

Cuestiones relacionadas