如何使用 JS/JQ 复制 DOM 选择元素并保留所选选项答案

【问题标题】：How to duplicate DOM select element and retain selected option with JS/JQ如何使用 JS/JQ 复制 DOM 选择元素并保留所选选项
【发布时间】：2020-10-15 22:13:30
【问题描述】：

我有一个选择元素，用户可以在其中选择一个选项。我希望能够复制该元素，同时保留用户选择的选项以在页面的其他地方使用。 .clone() 不保留所选选项。有什么建议吗？

重要编辑：我在问：是否有解决方法： "注意：出于性能原因，某些表单元素的动态状态（例如，输入到 textarea 的用户数据和对 select 进行的用户选择）不会复制到克隆的元素。克隆输入元素时，元素的动态状态 (例如，输入到文本输入中的用户数据和用户对复选框所做的选择）保留在克隆的元素中。” ?

最小可重现示例：

预期行为： 1. 用户从 select#favorite-color 元素中选择一个选项。 2. 用户然后点击按钮#clone-li 元素 3. 我希望将 li.color-picker 元素的深层副本作为子元素附加到 ul.last 元素，WHILE 在克隆后保留所选选项选择#favorite-color 元素。

<ul class="first">
    <li class="color-picker">
        <select name="favorite-color" id="favorite-color">
            <option value="1">Blue</option>
            <option value="2" class="red">Red</option>
            <option value="3">Green</option>
        </select>
    </li>
</ul>

<ul class="last">
    
</ul>

<button type="button" id="clone-li">Clone Color Picker Li</button>

<script type="text/javascript"> $(document).ready(function() {
    // ******************************** v INITIALIZE v ******************************** //
        // Variables:
            // DOM:
                var color_picker_li = $('li.color-picker');
                var favorite_color_select = $('select#favorite-color');
                var last_ul = $('ul.last');
                var clone_color_picker_li_button = $('button#clone-li')

        // States:
            // setTimeout(() => {
            //     $(favorite_color_select).find('option.red').prop('selected',true);

            //     setTimeout(() => {
            //         $(clone_color_picker_li_button).trigger('click');
                
            //     }, 3000);
            // }, 1500);
            
    // ******************************** ^ INITIALIZE ^ ******************************** //
    
    // ********************************** v EVENTS v ********************************** //
        // Handle a CLICK on the Cloen Color Picker Li Button:
            $(clone_color_picker_li_button).on('click', function() {
                $(color_picker_li).clone().appendTo(last_ul);
            });
        
    // ********************************** ^ EVENTS ^ ********************************** //
}); </script>

【问题讨论】：

标签： javascript jquery dom state

【解决方案1】：

只需根据原始选择的值设置克隆的值

$('select.sel').change(function(){
   const clone = $(this).clone().val(this.value);
   $('#cont').append(clone);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="sel">
  <option value="">--pick one --</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<div id="cont">
<h3>Clone</h3>
</div>

【讨论】：

谢谢，但是如果它是一个带有 select 或 textarea 子元素的 li 怎么办。我希望有一种方法可以复制那个 li 而不管它是孩子还是保留他们的价值。
如果您提供minimal reproducible example 来帮助您解决特定用例，将会有所帮助
该示例是否提供更多上下文 @charlietfl ？

【解决方案2】：

我创建了一个函数来扩展 jQuery 内置的“.clone()”函数，以创建一个深度复制一组匹配的元素，并将所有表单元素的动态状态复制到克隆的元素。

这里是回购链接：https://github.com/blackirishmec/jq-deepest-copy

使用这个函数代替 .clone() 解决了我的问题。

【讨论】：

@charlietfl 终于想通了，如果有机会，请告诉我你的想法。