将克隆<option>推入数组

时间:2017-06-07 12:54:19

标签: javascript jquery clone

守则如下

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

});
  

这是我在检查元素时发现的内容

     

[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>任何方式添加 到阵列?

2 个答案:

答案 0 :(得分:2)

我认为您希望使用克隆选项动态创建选择。使用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);
});

答案 1 :(得分:1)

你可以尝试

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

这将包含select菜单的HTML,因此您无需附加该菜单。它还将包含HTML选项。