动态创建 Select2 多选框：点击事件无效的解决方案

本文旨在解决在使用 JavaScript 和 Select2 插件时，通过点击事件动态创建多选框时，Select2 功能无法正常工作的问题。我们将提供一种有效的解决方案，通过克隆模板并初始化 Select2 实例，确保动态创建的 Select2 控件能够正确显示和工作。

在 Web 开发中，经常会遇到需要动态创建表单元素的情况，例如根据用户操作动态添加 Select2 多选框。然而，直接通过 JavaScript 添加的 Select2 控件可能无法正常工作，因为 Select2 需要在 DOM 加载完成后进行初始化。本文将介绍一种解决此问题的方法，确保每次动态创建的 Select2 控件都能正确显示和使用。

解决方案：克隆模板并初始化

解决动态创建 Select2 控件的关键在于，每次添加新的 <select> 元素后，都需要显式地初始化 Select2 插件。一种常用的方法是使用模板克隆的方式，首先在 HTML 中创建一个隐藏的模板，然后通过 JavaScript 克隆该模板，并为克隆后的元素初始化 Select2。

以下是详细的步骤和示例代码：

1. HTML 结构：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"></script>

<button type="button" id="add_select">Add Select2</button>
<div class="for_select">
  <div class="c-input c-input--select c-input--icon">
      <!-- add hidden class so the template is not visible -->
      <select class="select2 main_select2 hidden">
          <option>Choose 1</option>
          <option>Choose 2</option>
         <option>Choose 3</option>
      </select>
  </div>
</div>

在上面的代码中，我们首先引入了 Select2 的 CSS 和 JavaScript 文件。然后，定义了一个按钮 add_select 用于触发添加 Select2 控件的操作。for_select div 用于存放动态创建的 Select2 控件。关键在于 <select> 元素，我们使用 hidden 类将其隐藏，作为模板使用。

2. CSS 样式：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

.hidden {
    display: none;
}

.hidden 类用于隐藏模板 <select> 元素。

3. JavaScript 代码：

let count = 0;                         // Track how many copies we have
let $template = $('.c-input--select'); // The HTML you want to copy each time
let $container = $('.for_select');     // Where the copies should be added

$('#add_select').on('click', function() {

    // Increment our counter
    count++;

    // Create a copy of your base HTML/select
    let $copy = $template.clone();

    // Find the select in the div, and give it an id so we can find it
    $copy.find('select').attr('id', count);

    // Append it
    $container.append($copy);

    // Initialise it as a select2, using the id we just gave it to find it
    $('#' + count).select2();
});

这段 JavaScript 代码实现了以下功能：

• count 变量： 用于跟踪已创建的 Select2 控件的数量，并用于生成唯一的 ID。
• $template 变量： 存储隐藏的模板 <select> 元素。
• $container 变量： 存储 Select2 控件的容器。
• $('#add_select').on('click', function() { ... });： 为 add_select 按钮绑定点击事件处理函数。
• $copy = $template.clone();： 克隆模板 <select> 元素。
• $copy.find('select').attr('id', count);： 为克隆后的 <select> 元素设置唯一的 ID。
• $container.append($copy);： 将克隆后的 <select> 元素添加到容器中。
• $('#' + count).select2();： 使用 ID 选择器找到新添加的 <select> 元素，并初始化 Select2 插件。

注意事项：

• Select2 版本兼容性： 上述代码示例使用的 Select2 版本较旧，请根据实际使用的 Select2 版本调整代码。较新版本的 Select2 初始化方式可能有所不同。
• 唯一 ID： 确保每个动态创建的 Select2 控件都有唯一的 ID，避免 ID 冲突导致的问题。
• 事件委托： 如果 Select2 控件需要绑定事件，建议使用事件委托，将事件绑定到容器元素上，而不是直接绑定到动态创建的元素上。

总结：

通过克隆模板并初始化 Select2 实例，可以有效地解决动态创建 Select2 多选框时功能失效的问题。这种方法简单易懂，适用于各种 Web 开发场景。在实际应用中，需要根据具体情况调整代码，例如使用不同的 Select2 初始化选项、处理不同的数据源等。希望本文能帮助你解决动态创建 Select2 控件的问题。

以上就是动态创建 Select2 多选框：点击事件无效的解决方案的详细内容，更多请关注php中文网其它相关文章！