jquery - 如何在按钮单击时初始化选择框

Question

我正在使用 jquery select2 插件，它工作正常，但是当我使用函数 add_field 在按钮上添加 select2 框时，它会添加禁用的 select2 框。这是我的示例代码

 <div id="divSelectContaioner">
        <div id="divSelect">
            <select class="e1" style="width: 200px;">
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
            </select>
            <br/>
        </div>
    </div>
    <button id="add_field">Add Field</button>

和 js 添加 select2 框是

$(function() { 
        // initilizing the select box 
            $(".e1").select2(); 
            // add new select box
            $('#add_field').click(function(){
                $('#divSelectContaioner').append($('#divSelect').html());   
            });
        });

我无法弄清楚问题所在。我该怎么做？？

Answer 1

这应该工作

$(function() { 
    // initilizing the select box 
        var select = $('.e1').clone();

        $(".e1").select2();

        // add new select box
        $('#add_field').click(function(){
            var newSelect = select.clone();
            $('#divSelectContaioner').append(newSelect);
            newSelect.select2();   
        });
    });

select2 插件用自定义 html 替换您原来的选择框。所以首先我们需要一份原始选择的副本：

var select = $('.e1').clone();

当您添加新选择时，您将获得我们的原始副本，再次制作副本:) 并启动它

newSelect.select2(); 

Answer 2

尝试这个

$('#add_field').click(function(){
    var $clonedSelect = $(".e1").clone(true);
    $('#divSelectContaioner').append($clonedSelect);   
    $clonedSelect.select2();
});

与.clone()您一起创建元素的副本。如果参数true传递给它，它可以复制克隆元素的数据和事件。这比使用$('#divSelect').html().