如何在JavaScript中克隆Select元素的选项集合

Question

我在JavaScript中有一个选择元素的options collection。我想在不使用jQuery的情况下克隆整个项目列表。该怎么做？

Answer 1

您可以使用 Node.cloneNode()

let collection = document.querySelectorAll('option');
let cloned = Array.from(collection).map(option => option.cloneNode(true));
const select = document.querySelector('select');
cloned.forEach(opt=>{
  select.appendChild(opt)
})

<select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>

Answer 2

这应该克隆并排序数据对象，如果涉及箭头方法，则将无法工作。

const clone = obj =>
  Array.isArray(obj)
    ? obj.map(item => clone(item))
    : obj instanceof Date
    ? new Date(obj.getTime())
    : obj && typeof obj === 'object'
    ? Object.getOwnPropertyNames(obj).reduce((o, prop) => {
        o[prop] = clone(obj[prop]);
        return o;
      }, {})
    : obj;