Jquery 克隆并添加删除按钮

在我的模板文件中，我有类似的内容：

<select name="author[]">
{section name="something" loop=$something} 
<option value="{$something[something].name}">{$something[something].name}</option>
{/section}
</select> 

我想要的是创建一个按钮，添加另一个选择元素，显示与第一个选择元素相同的选项。如何使用jQuery实现这一点

这和我想要的概念是一样的。但添加文本输入而不是选择输入。此外，它不会从第一个输入中添加任何值

我想要的是一个按钮，它复制我的选择代码并再次显示它及其所有选项，并为每个额外的选择元素添加一个删除按钮，就像我提供的示例一样

[编辑]

现在我知道我可以使用克隆来复制元素。但是，我似乎找不到为我克隆的每个元素添加删除按钮的方法。如何做到这一点

[编辑二]

这将完成添加“删除”按钮的工作。但是，我不希望在原始的select元素上显示“删除”按钮

[编辑部3]

通过使用CSS在第一个select元素中隐藏remove按钮，我成功地得到了我想要的东西。尽管如此，我还是希望只使用jQuery来执行它。

您可以使用

大概是这样的：

$('[name="author[]"]').clone().appendTo('#your_div_id_where_you_want_it');

  $('#author').clone().appendTo('#your_div_id_where_you_want_it');

您可能希望为选择框指定一个id，以使选择和克隆它看起来更干净。此外，name属性中的[]可能会导致问题，因此创建id也可以解决这一问题。如果要添加id，则选择将如下所示：

<select id="author" name="author[]">

你可以用

大概是这样的：

$('[name="author[]"]').clone().appendTo('#your_div_id_where_you_want_it');

  $('#author').clone().appendTo('#your_div_id_where_you_want_it');

您可能希望为选择框指定一个id，以使选择和克隆它看起来更干净。此外，name属性中的[]可能会导致问题，因此创建id也可以解决这一问题。如果要添加id，则选择将如下所示：

<select id="author" name="author[]">

jQuery的API特性，您可以而且应该利用这些特性：

在处理动态DOM操作时，只关注ID会使代码复杂化，这是一条规则——建议使用类选择器。 您的代码可以简单到：

jQuery(function($){
    $(".add").click(function() {
        $("#select").clone()
            .removeAttr("id")
            .append( $('<a class="delete" href="#">Remove</a>') )
            .appendTo("#additionalselects");
    });
    $("body").on('click',".delete", function() {
        $(this).closest(".input").remove();
    });
});

以下是jQuery的API特性，您可以也应该利用这些特性：

在处理动态DOM操作时，只关注ID会使代码复杂化，这是一条规则——建议使用类选择器。 您的代码可以简单到：

jQuery(function($){
    $(".add").click(function() {
        $("#select").clone()
            .removeAttr("id")
            .append( $('<a class="delete" href="#">Remove</a>') )
            .appendTo("#additionalselects");
    });
    $("body").on('click',".delete", function() {
        $(this).closest(".input").remove();
    });
});

---

这是您可能需要的一个

。first.clone，不确定克隆一次后会发生什么，克隆是否会克隆您在后续调用中捕获的所有对象。@nathanhayfield只会移动您保存为变量的元素，将其保留在您放置的最新位置。您需要克隆保存的元素，例如$myselect=$'[name=author[]]'。克隆$myselect.clone.appendTo。。。；如何向代码中添加额外的HTML？例如，删除克隆输入的删除按钮。您可能需要。first.clone，不确定克隆一次后会发生什么，克隆是否会克隆后续调用中捕获的所有对象。@nathanhayfield只会移动保存为变量的元素，将其保留在放置它的最新位置。您需要克隆保存的元素，例如$myselect=$'[name=author[]]'。克隆$myselect.clone.appendTo。。。；如何向代码中添加额外的HTML？例如，删除克隆输入的删除按钮。