javascript - 将克隆的 插入数组

Question

代码如下

var options = $("#select> option").clone();

$('#btn').on('click',function(e){
 
       e.preventDefault();
       var copyEl = [];
       copyEl.push("<select id='select"+i+"'class='select form-control'>");
       options.each(function(){
                console.log(this);
                copyEl.push(this);
            });
       
      copyEl.push("</select>");

      copyEl = $(copyEl.join(''));

      $('#div').after(copyEl.clone());

});

this is what i do find when inspect the element

[object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement][object HTMLOptionElement]

控制台打印

<option id='1'>Toy</option>
<option id='2'>Story</option>

这是我确实需要插入数组的结果，这段代码与 <datalist> 一起工作正常但不与 <select> 一起使用任何方式添加到数组？

Answer 1

我认为您想使用克隆选项动态创建选择。使用jQuery(html, attributes)然后创建选定的 .append()克隆选项可供选择。

$('#btn').on('click', function (e) {
    e.preventDefault();
    var select = $("<select>", { id : 'select' + i,
         'class': 'select form-control'
    }); 
    select.append(options);
    $('#div').after(select);
});

<小时/>

根据评论，使用outerHTML属性

options.each(function(){
    copyEl.push(this.outerHTML);
});