duplicar o clonar un select con javascript

[mauricioadrian]

muchachos probe con las funciones de clonar nodos de javascript y no he logrado clonar un select ahora intento con este codigo, en el cual creo un select y le quiero asignar los mismos valores, propiedades y metodos de otro ya creado, pero tampoco funciona, me crea el select vacio. pongo el codigo a ver si puede ayudarme. desde ya muchas gracias.

var nuevo_select =document.createElement("select");
document.form_stock_am.appendChild(nuevo_select);
nuevo_select.type='select';
nuevo_select = document.documentElement('select_original');

[IsaBelM]

Has usado el método cloneNode()?? https://developer.mozilla.org/es/doc...Node/cloneNode Que raro !!

[mauricioadrian]

si lo he probado y no logro que funcione, paso el codigo usando el metodocloneNode

//creo la etiqueta COLOR(input de solo lectura)
var var_etiqueta_nueva_color=document.createElement("i nput");
document.form_stock_am.appendChild(var_etiqueta_nu eva_color);
var_etiqueta_nueva_color.type='input';
var_etiqueta_nueva_color.value='COLOR / '+contador;
var_etiqueta_nueva_color.readonly="readonly";


var p = document.getElementById("combo_color");
var p_prime = p.cloneNode(true);


por otro lado este seria el elemento a clonar.

<td align="center">

Color : <?
$str_sql= "SELECT idcolores,color FROM colores ";
$result=mysql_query($str_sql);
?>
<select id="combo_color" name="combo_color" onkeydown="insertar_input(event);" >

<?
while ($row = mysql_fetch_row($result)){
cargar_combo('idcolores',$row[0],'color ','colores');
?>
<option id="color"> <? echo $row[1]?> </option>");
<?
}
?>
</select>

</td>

[IsaBelM]

The duplicate node returned bycloneNode()*is not part of the document until it is added to another node that is part of the document usingNode.appendChild()
*or a similar method. It also has no parent until it is appended to another node.

[mauricioadrian]

perdon isabelm me podrias explicar un poco tu respuesta, no entendi. desde ya te pido disculpas por mi ignorancia.

[IsaBelM]

lo que te dice ese texto es que el elemento que quieres duplicar has de añadirlo a un elemento ya existe. en este ejemplo, lo añado a un elemento <div> con id#clones que ya existe en el dom

var p = document.querySelector(".combo_color");
var p_prime = p.cloneNode(true);
document.getElementById('clones').appendChild(p_pr ime);


<select class="combo_color" name="combo_color" onChange="insertar_input(event);" >
<option value="rojo">rojo</option>
<option value="verde">verde</option>
<option value="azul">azul</option>
<option value="naranja">naraja</option>
</select>

<div id="clones"></div>

como puedes observar que realizado algunos cambios en el html

• la id#combo_color la he cambiado por class.combo_color ya que, no se deben duplicar las ids
• a las option le he quitado las id y en su lugar le he puesto el atributo value
• he cambiado el evento onKeydown por onChange y lo he escrito en formato camelCase