将克隆的 <option> 推入数组

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

我认为您希望使用克隆选项动态创建 select。使用 jQuery(html, attributes) to create selected then .append() 克隆选项到 select。

$('#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);
});

Answer 2

你可以试试

options = document.getElementById("selectID").outerHTML; copyEL.push(options);

这将包括 select 菜单的 HTML，因此您无需附加它。它还将包括带有 HTML 的选项。

将克隆的 <option> 推入数组

push cloned <option> into array

javascript

jquery

clone