Question

我正在使用jquery select2插件工作正常但是当我在按钮上添加select2框时，使用add_field函数添加禁用的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

试试这个

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

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

Answer 2

这应该有效

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

如何初始化按钮单击上的选择框

2 个答案: