Question

如何在JavaScript中复制以下内容？我希望在同一页面中有两个下拉列表。

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

谢谢

Answer 1

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

首先你得到JS的实际选择。然后你更新id，最后你把它添加到div，你想要它。

编辑评论

您可以构建模板：

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);

Answer 2

您可以使用cloneNode方法。

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

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

编辑：更新了完整的代码示例

Answer 3

测试一下！

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
}

当用户点击指定的fieldset时，它将克隆它，并将新克隆附加到上一个。

您可以通过将this.appendChild(clone)更改为document.getElementById("yourid").appendChild(clone)

来更改新克隆的附加内容

希望这有帮助！： - ）

Javascript - 查找和复制下拉列表

3 个答案: