¿Cómo puedo duplicar el siguiente contenido en JavaScript? Quiero tener dos menús desplegables en la misma página.

<fieldset id="product-options-wrapper" class="product-options">
  <dl class="last">
    <dt>
    <label class="required">
    <em>*</em>
    Pack Size/Price
    </label>
    </dt>
    <dd class="last">
      <div class="input-box">
        <select id="attribute148" class="required-entry super-attribute-select" name="super_attribute[148]" onchange="return changeSku(148, this);">
          <option value="">Choose an Option...</option>
          <option value="76">10g: €9.60</option>
          <option value="61">25g: €17.40</option>
          <option value="78">100g: €43.80</option>
        </select>
      </div>
    </dd>
  </dl>

Gracias

-1
Robert 11 ene. 2017 a las 14:10

3 respuestas

La mejor respuesta
var $select = document.querySelector('select#attribute148');
$select.id = "newId";
document.querySelector('yourNewDivId').appendChild($select);

Primero obtienes la selección real de JS. Luego actualiza la identificación y finalmente la agrega al div, donde desea tenerla.

EDITAR para comentario

Puedes construir una plantilla:

function createSelect(id, options){
    var $select = document.createElement('select');
    $select.id = id;
    for(var i = 0; i < options.length; i++){
        var $option = document.createElement('option');
        $option.value = options[i].value;
        $option.innerHTML = options[i].name;
        $select.appendChild($option);
    }
    return $select;
}
var select = createSelect(48, [{value: 76, name: "10g: €9.60}, ...]);
document.querySelector('target').appendChild(select);
1
DomeTune 11 ene. 2017 a las 11:21

¡Prueba esto!

document.getElementById("product-options-wrapper").onclick = function(){ // when the fieldset is clicked
    var clone = this.cloneNode(true); 
    this.appendChild(clone); // clone it and append to the last fieldset
}

Cuando un usuario hace clic en el fieldset especificado, lo clonará y agregará el nuevo clon al anterior.

Puede cambiar a qué se agrega el nuevo clon cambiando this.appendChild(clone) a document.getElementById("yourid").appendChild(clone)

¡Espero que esto ayude! :-)

0
GROVER. 11 ene. 2017 a las 11:26

Puede usar el método cloneNode para esto.

var el = document.getElementById('product-options-wrapper');
var dupEl = el.cloneNode();

dupEl.id = "some-new-id";
document.getElementById('some-container').appendChild(dupEl);

EDITAR: actualizado con el ejemplo de código completo

0
Stuart 11 ene. 2017 a las 11:26