Question

说我有一个选择：

<select id="mySelect">
 <option value="1">First</option>
 <option value="2">Second</option>
 <option value="3">Third</option>
</select>

我想克隆所有选项而不必克隆选择。这可能吗？在我的情况下，无法克隆选择。

我想做这样的事情：

$('#mySelect').html().clone();

但这没效果。

更新

我有一个随时间变化的选择。我在模态中有第二个选择。当调用模态时，我需要使用与第一个模态相同的选项更新模态的选择。两个选择都有不同的属性，因此我无法克隆选择。

Answer 1

将选项从主要选择复制到次要选择的最简单方法是使用html()，如下所示：

var options = $('#mySelect').html();
$('#mySelect2').html(options);

或者在一行中：

$('#mySelect2').html($('#mySelect').html());

如果要在复制到另一个选项之前操作选项，则可以使用clone()将各个选择选项的数组作为jQuery对象，并在将entires复制到另一个选择之前更改数组。但是，根据您简单地将选项从一个选项复制到另一个选项的更新要求，使用克隆肯定会有点过分。但这就是你要做的事情：

var optionsArr = $('#mySelect option').clone();
console.log(optionsArr); // See the contents
// Manipulate and populate other select as needed

Answer 2

试一试

$('#mySelect option').clone()

Answer 3

您可以使用clone()生成克隆，然后使用appendTo将新选项元素附加到新选择，然后再次使用appendTo将新选择附加到正文。这个小技巧就像一个魅力：

$('#'+original_id+' option').clone().appendTo($('<select id="'+new_id+'">').appendTo('body'));

考虑到您要将副本元素附加到正文的末尾。

这是一个演示如何生成副本的演示：