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

Question

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

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

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

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

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

[编辑]

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

[编辑2]

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

[编辑3]

通过使用 CSS 隐藏第一个 select 元素的删除按钮，我设法获得了我想要的东西，请参阅 JSFIDDLE .不过，我希望看到它只使用 jQuery 来执行。

Answer 1

你可以使用 jquery clone .

像这样:

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

你可能想给你的选择框一个 id，让选择和克隆看起来更干净。此外，name 属性中的 [] 可能会导致问题，因此制作 id 也可以解决该问题。如果要添加 id，选择将如下所示:

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

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

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