Question

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

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

我想要的是创建一个按钮，添加另一个select元素，显示我的第一个options元素的相同select。我怎么能用jQuery做到这一点？

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

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

[编辑]

现在我知道我可以使用clone来复制元素。但是，我似乎找不到为我克隆的每个元素添加删除按钮的方法。怎么办？

[EDIT2]

此JSfiddle可以添加删除按钮。但是，我不希望删除按钮显示在我原来的select元素

上

[EDIT3]

我已经通过使用CSS隐藏第一个select元素中的删除按钮来获取我想要的内容，请参阅此JSFIDDLE。不过，我希望看到它只使用jQuery执行。

Answer 1

您可以使用jquery clone。

这样的事情：

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

您可能希望为您的选择框添加一个ID，以便选择和克隆它看起来更干净。此外，name属性中的[]可能会导致问题，因此生成ID也可以解决问题。如果要添加id：

，则select将如下所示

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

然后克隆行看起来像这样：

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

Answer 2

jQuery的API功能powerful selectors，您可以（并且应该）使用它：

当您处理动态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();
    });
});

这是link to jsfiddle

克隆<select>并添加删除按钮</select>

2 个答案: