克隆的 Select2 在 Asp.Net 中不起作用

Posted 2023-05-07

【中文标题】克隆的 Select2 在 Asp.Net 中不起作用

【英文标题】：Cloned Select2 is not working in Asp.Net

【发布时间】：2017-08-26 16:15:29

【问题描述】：

我尝试了很多资源：

Cloned Select2 is not responding

select2 is not working

select2 is not working

Initialising select2 created dynamically

How to execute select2() function on dynamically created select list?

Select2 not displayed when added dynamically for the first time

解释：

查看页面是使用Razor 构建的。我正在尝试使用 JQuery 克隆 row，第一个工作正常并且新创建的（动态）未打开（冻结）。 图片： image link

查看代码：

                        <div id="ROW_0" class="template">
                            <hr />
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Credit Account</label>
                                        @html.DropDownListFor(model => model.AccountsId, new SelectList(Model.Accountss, "Id", "Name"), "-- select account --", new  @class = "form-control select required select2insidemodal", @id = "creditAccount" )
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Amount</label>
                                        @Html.EditorFor(model => model.Credit, new  htmlAttributes = new  @class = "form-control", @type = "text", @id = "credit"  )
                                    </div>
                                    <span id="[e-mail](vm => vm.Credit)" class="dN cR"></span>

                                </div>
                            </div>
                        </div>

脚本：

//button for adding row 
$(document).ready(function () 

  $(document).on('click', "#addMore",function (e) 
             addNewRow();
         );
         
        function addNewRow() 
            var div = $(".template").clone().html();

            //find all select2 and destroy them   
           $(div).find(".select2").each(function (index) 
                if ($(this).data('select2')) 
                    $(this).select2('destroy');
                
            );


           $("#dynamicBlock").prepend(div); //adding cloned data to new div '#dynamicBlock'.

帮帮我。

【参考方案1】：

在您将新选择附加到页面后，您似乎并未对其进行初始化。

您需要将新脚本附加到页面（并运行它），以设置选择的，否则它们将只是静止不动。

var initScript = '$(".select2insidemodal").select2();';

$('<script>' + initScript + '</' + 'script>').appendTo(document.body);

如果您要克隆多个选择，那么我想您可以只添加最后一次且仅一次的 init 脚本，因为它应该初始化每个克隆的选择。