时间戳

首页 > 解决方案 > 如何使用 JS/JQ 复制 DOM 选择元素并保留所选选项

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

问题描述

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

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

最小可重现示例：

预期行为： 1. 用户从 select#favorite-color 元素中选择一个选项。2. 然后用户单击 button#clone-li 元素 3. 我希望将 li.color-picker 元素的深层副本作为子元素附加到 ul.last 元素，同时在克隆的选择中保留选定的选项#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>

标签： javascriptjquerydomstate

解决方案

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

$('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>

推荐阅读