当第一次动态添加时，Select2不显示 [英] Select2 not displayed when added dynamically for the first time

问题描述

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

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

以下是脚本： p>

  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; 
函数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;'>））; 
 
 //添加属性选择器
 
 $（容器）.append（& nbsp;& nbsp;& nbsp;& nbsp;& amp; nbsp;& nbsp;& amp; 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;）; 
 //添加文本框。 
 $（'select'）。select2（{width：'20％'}）; 
 $（container）.append（'< input type = text class =inputid = tbtext'+ iCnt +''+ 
'placeholder =Value'+ iCnt +'style = float：center;/>< br>< br>'）; 
 
 
 //显示提交按钮，如果ATLEAST1元素已被创建。 
 if（iCnt == 1）{
 
 var divSubmit = $（document.createElement（'div'））; 
 $（divSubmit）.append（'< input type = button class =bt'+ 
'onclick =GetTextValue（）'+ 
'id = btSubmit value = Submit />'）; 
 
} 
 
 //将DIV元素添加到主容器中。 
 $（'＃main'）。after（container，divSubmit）; 
} 
 //达到指定限制后，禁用添加按钮。 
 //（20是我们设置的限制）
 else {
 $（container）.append（'< label>达到限制< / label>'）; 
 $（'＃btAdd'）。attr（'class'，'bt-disable'）; 
 $（'＃btAdd'）。attr（'disabled'，'disabled'）; 
 
 
  

以下是js fiddle的链接：

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

请指教。

解决方案

您需要将新元素添加到DOM，然后才能初始化select2。

  // //将元素添加到main元素中，容器。 
 $（'＃main'）。after（container，divSubmit）; 
 
 //初始化select2 
 $（'select'）。select2（{width：'20％'}）; 
  

请参阅应用于小提琴的这些更改：
https://jsfiddle.net/zjafvr3u/1/

I am working with Jquery and I have a use case to add some elements dynamically on a button click.

While adding the 'select' dynamically, the select2 is not displayed when the add button is clicked for the first time, instead, a simple 'select' is displayed, and when we click on add button again, all the previous 'select' get formatted to select2.

I needed that when we click the add button, the first generated selects should also get the select2.

Following is the script:

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');
        }
    }

Following is the link to js fiddle:

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

Please advise.

解决方案

Your only problem is that you need your new elements added to the DOM before you can initialize select2. Add the elements to the DOM first, then your code will work.

// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);

// Initialize select2
$('select').select2({width : '20%'});   

See these changes applied to the fiddle: https://jsfiddle.net/zjafvr3u/1/

这篇关于当第一次动态添加时，Select2不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！