更新 html 后 Select2-input 中断

Question

问题描述：

我有一个包含分组输入/选择元素的表单，称为“操作”。一个“动作”具有三个输入元素（其中两个是 select2 多选元素）。 在表单本身中，我希望能够拥有动态数量的“动作”，因此我制作了一个模板作为“动作”并使用 ajax 请求调用此模板。 此 ajax 调用的响应是字符串格式的原始 html。

我想要实现的图形表示：

为了将此 html 添加到其他“操作”的父容器中，我使用以下代码：

parentContainer.innerHTML += response.response

我目前的问题是：

添加新的html内容后我需要初始化所有的select2项，否则它们将不会被识别为select2项。这一切都适用于第一个元素 - 但是一旦我添加第二个“动作”，第一个“动作”就会以某种方式被破坏，并且 select2 项目不再起作用。 我试图重新初始化那些损坏的 select2 项，但这使情况变得更糟，并在同一个“操作”中的第一个 select2 项下方添加了第二个 select2 项

用于更新 select2 的 JavaScript：

$('#Action-'+num).select2();
$('#ActionID-'+num).select2();
$('#ActionParameter-'+num).select2();

num 表示添加的新元素的id。

一个“动作”的渲染模板结构：

    <%@page import="xyz.wolfify.moderation.BlacklistActionEnum"%>
    <%
        int i = Integer.parseInt(request.getParameter("incrementor"));
    %>
    
    <div id="ActionVisibility-<%=i+1%>" class="action-visibility card border-dark <%if(i<=0){%>mt-5<%}%>">
        <div class="card-header bg-dark">
            <h4 class="m-b-0 text-white action-title">Action <%=i+1%></h4>
        </div>
        <div class="card-body">
            <div class="row" style="margin-bottom: -1rem">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Action</label>
                        <select id="Action-<%=i+1%>" class="select2 form-control custom-select action-type" style="width: 100%" onchange="changeAction(this.id)">
                            <% for(BlacklistActionEnum availableType : BlacklistActionEnum.values()) { %>
                            <option value="<%= availableType %>"><%= availableType %></option>
                            <% } %>
                        </select>
                    </div>
                </div>
                <div id="ActionIDVisibility-<%=i+1%>" style="display: none" class="col-md-6 action-id-visibility">
                    <div class="form-group">
                        <label>Role/Channel ID</label>
                        <select id="ActionID-<%=i+1%>" class="select2 form-control custom-select action-id" style="width: 100%">
                            <option></option>
                        </select>
                    </div>
                </div>
            </div>
            <div id="ActionParameterVisibility-<%=i+1%>" style="display: none" class="row action-param-visibility">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Parameter</label>
                        <input value="" id="ActionParameter-<%=i+1%>" type="text" class="form-control action-param" style="width: 100%">
                    </div>
                </div>
            </div>
            <button id="Remove-<%=i+1%>" type="button" class="btn waves-effect waves-light btn-outline-danger action-remove" onclick="removeAction(this.id)">Remove this Action</button>
        </div>
    </div>

我很感谢这个问题的每一个答案！

Answer 1

我会尝试使用 append 方法添加新选项，然后按照文档中的说明触发更改事件

https://select2.org/programmatic-control/add-select-clear-items