jQuery 克隆 <select> 元素

Posted 2023-02-22

【中文标题】jQuery 克隆 <select> 元素

【英文标题】：JQuery clone <select> element

【发布时间】：2011-04-23 19:51:32

【问题描述】：

我想使用 JQuery 在 html 中克隆 输入。 我不知道该怎么做，所以想我会在这里问。

对将其写回文档的最佳方式也特别感兴趣。

我的选择元素如下所示：

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

谢谢。

【问题讨论】：

注意：由于 jQuery 中的错误，选择的属性不会被复制。克隆后 selectedIndex 会丢失。您必须再次手动设置所选值。 bugs.jquery.com/ticket/9997 看起来 jQuery 可能不会很快解决这个问题。祝你好运！

【参考方案1】：

您可以通过选择更改将选项选中为真，然后使用克隆就可以了。

$("#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);
);

【参考方案2】：

接受答案的唯一问题是，如果您的选择包含 optgroup，它们将不会被复制。在这种情况下，我发现最简单的方法就是这样做：

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

【参考方案3】：

这个怎么样？

<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');

谢谢。

【参考方案4】：

jQuery 有一个内置的clone 方法。有很多 options 用于说明如何将克隆的元素重新添加进去。正确的选择取决于您的应用程序。

【参考方案5】：

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

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

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

【讨论】：

谢谢，我已经把你的答案分成了两行，因为我更喜欢这样。

注意 jquery clone 的文档，它不会克隆任何选择的内容：“出于性能原因，某些表单元素的动态状态（例如，输入文本区域的用户数据和用户选择到一个选择）不会复制到克隆的元素。当克隆输入元素时，元素的动态状态（例如，输入到文本输入中的用户数据和用户对复选框所做的选择）将保留在克隆的元素中。见api.jquery.com/clone