Question

我试图在给定json响应的情况下，一次或多次克隆HTML <select>下拉列表。

问题在于，当我尝试将克隆存储在变量中并在屏幕上显示时，我看到以下内容：

[object Object]

我做了一个简单的JSFIDDLE来帮助解释我的问题。

注意事项：

选择下拉列表位于隐藏的div中。

<div class="hidden">
    <select class="certList">
       .....
    </select>
</div>

我正在使用：

构建一个字符串

buildList += "<div....

然后我使用jQuery append函数附加我构建的列表。

$("#certRow").append(buildList);

最后，如果有任何关于如何更好地展示结果的提示，我会全力以赴。我在考虑使用无序列表但不确定如何使用。

Answer 1

将html复制到你的追加字符串中：

"<div class='col-4'>"+certList[0].outerHTML+"</div></div>";

因为它是你用jQuery对象连接一个字符串（而object.ToString()是[object Object]）

Answer 2

将元素附加到div

    var certList = $(".certList").clone();
    var buildList = "";
      $.each(res.data, function(i, data) { 
        buildList += "<div class='ti-row'>"+
            "<div class='col-4 center'>"+data +"</div>"+
            "<div class='col-4 right'>Select Certs : </div>"+
            "<div class='col-4 addSelect'></div></div>";
        });
        var html = $(buildList);
        html.find(".addSelect").append(certList);    
        $("#certRow").append(html);

Answer 3

尝试使用outerHTML

var certList = $(".certList")[0].outerHTML;

Updated Fiddle

Answer 4

使用.parent（）。html（）而不是.clone（）

clone返回对象，你不能将对象附加到字符串，但是html返回你可以附加的字符串

多次克隆一个html元素

4 个答案: