JQuery克隆<select>元素

Question

我想使用 JQuery 克隆 HTML 中的 <select> 输入框。
我不确定如何去做，所以想在这里问问。

特别是对于最好的将其写回文档中的方法很感兴趣。

我的选择元素看起来像这样：

<select id="options">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
</select>

谢谢。

- diggersworld

---

注意：由于jQuery中的错误，所选属性将不会被复制。在克隆后，selectedIndex将丢失。您需要手动重新设置所选值。 http://bugs.jquery.com/ticket/9997 看起来jQuery可能不会很快修复这个问题。祝你好运！ - chocolata

Answer 1

参见: http://api.jquery.com/clone/

$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');

appendTo(...)只是插入克隆元素的一种方法。其他方法可以在此处找到：http://api.jquery.com/category/manipulation/

- Plaudit Design

---

谢谢，我将你的答案分成两行，因为我更喜欢这样。 - diggersworld

从jquery克隆的文档中注意到，它不会克隆所选内容："出于性能原因，某些表单元素（例如，用户输入到文本区域和用户选择的选择）的动态状态不会复制到克隆元素中。当克隆输入元素时，元素的动态状态（例如，用户输入到文本输入和用户选择的复选框）保留在克隆元素中。" 请参见http://api.jquery.com/clone/ - dalore

Answer 2

这个怎么样？

<select id="options">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
</select>

//目标

<select id="options2">
</select>

$('#options').find('option').clone().appendTo('#options2');

谢谢。

- user754952

Answer 3

仅接受答案的问题在于，如果您的选择包含 optgroups，它们将不会被复制。在这种情况下，我发现最简单的方法是只需执行以下操作：

$('#options2').html($('#options').html());

- jesal

Answer 4

jQuery内置了clone方法。有许多选项可用于如何将克隆的元素添加回去。正确的选择取决于您的应用程序。

- CuriousCurmudgeon

Answer 5

你可以在选择改变时使用attr选项selected true，然后使用clone就可以了。

$("#options").off("change").on("change", function() {
    var val = $(this).val();

    $(this).find("option[value=" + val + "]").attr("selected", true);
});

$("#options").off("change").on("change", function() {
    var val = $(this).val();

    $(this).find("option[value=" + val + "]").attr("selected", true);
});

- user9054011