javascript - 更新 html 后 Select2-input 中断
问题描述
问题描述:
我有一个带有分组输入/选择元素的表单,称为“操作”。一个“动作”具有三个输入元素(其中两个是 select2 多选元素)。在表单本身中,我希望能够拥有动态数量的“Action”,因此我制作了一个“Action”模板并使用 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>
我很感谢这个问题的每一个答案!
解决方案
我会尝试使用 append 方法添加新选项,然后按照文档中的描述触发 change 事件
https://select2.org/programmatic-control/add-select-clear-items
推荐阅读
- excel - VBA - 使用 VBA 运行 excel 的内置屏幕截图工具(不是 ScreenClipping)
- python - 数据增强:需要增强多少比例的训练数据集?
- asp.net-core - 带有绝对路径的 dotnet 发布不尊重输出
- java - 忽略 sonarqube 规则“添加字段的子类应覆盖所有子类的“等于””?
- swift - 从异步完成处理程序中中断“for”循环
- sql-server - SQL - 动态运行逗号分隔列表并根据传递的值返回行
- coldfusion - 删除冷融合服务器上的所有会话
- reactjs - 我应该如何在 React 中使用不包含 @type 的外部组件模块?
- mysql - 在 MySQL 中设置复杂查询
- c++ - 如何在 qt 中创建自定义 TreeView,并将分支放在 ItemView 的右侧?