第一次动态添加Select2时不显示

Select2 not displayed when added dynamically for the first time

本文关键字：显示 Select2 动态 添加 第一次      更新时间：2023-09-26

我正在使用Jquery，我有一个用例来动态添加一些元素的按钮点击。

当动态添加'select'时，第一次点击添加按钮时不会显示select2，而是显示一个简单的'select'，当我们再次点击添加按钮时，所有先前的'select'都被格式化为select2。

我需要当我们点击添加按钮时，第一个生成的选择也应该得到select2。

以下是脚本: 
var container = $(document.createElement('div')).css({
        padding: '5px', margin: '20px', width: '400px', border: '1px solid',
        borderTopColor: '#999', float: 'left', borderBottomColor: '#999',
        borderLeftColor: '#999', borderRightColor: '#999'
    });
var iCnt = 0;
function add()
{
        if (iCnt <= 19) {
            iCnt = iCnt + 1;
    $(container).append($("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>")); 
    //Add Property Selector
    $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");     
    $(container).append($("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>"));
    $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");     
            // ADD TEXTBOX.
    $('select').select2({width : '20%'});
            $(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' +
                        'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>');

            // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
            if (iCnt == 1) {
                var divSubmit = $(document.createElement('div'));
                $(divSubmit).append('<input type=button class="bt"' + 
                    'onclick="GetTextValue()"' + 
                        'id=btSubmit value=Submit />');
            }
            // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
            $('#main').after(container, divSubmit);
        }
        // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
        // (20 IS THE LIMIT WE HAVE SET)
        else {
            $(container).append('<label>Reached the limit</label>'); 
            $('#btAdd').attr('class', 'bt-disable'); 
            $('#btAdd').attr('disabled', 'disabled');
        }
    }

下面是js fiddle的链接:

https://jsfiddle.net/hns0qk2b/43/

请建议。

唯一的问题是需要在初始化select2之前将新元素添加到DOM中。首先将元素添加到DOM中，然后您的代码就可以工作了。

// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
// Initialize select2
$('select').select2({width : '20%'});

看到这些变化适用于小提琴:https://jsfiddle.net/zjafvr3u/1/

相关文章：