Jquery文件上传不适用于Select2

Posted 2023-05-07

【中文标题】Jquery文件上传不适用于Select2

【英文标题】：Jquery file upload not working with Select2

【发布时间】：2015-01-09 08:17:49

【问题描述】：

我正在使用 jquery 文件上传 - 蓝色小鬼。 https://blueimp.github.io/jQuery-File-Upload/

当我添加文件时，它希望选择下拉菜单变成 select2

<script id="template-upload" type="text/x-tmpl">
    % for (var i=0, file; file=o.files[i]; i++)  
      %
        <tr class="template-upload fade">

            <td>
                <select name="" placeholder="Select file name" class="select2_category form-control" tabindex="1">
                  <option value="Select file name"></option>
                  <option value="">CNIC</option>
                  <option value="">Birth Certificate</option>
                </select>
            </td>
        </tr>
    %  %
    </script> 

从模板生成的添加文件按钮按钮。

jquery文件上传提供了添加文件的api。

jQuery('#submit_form').bind('fileuploadadd', function()
    jQuery("#submit-form-table select.select2_category").select2();

);

它适用于所有人。但最后一次迭代没有触发 SELECT2

【问题讨论】：

我添加了一个新答案。

【参考方案1】：

我认为问题是在添加每个文件时执行以下行，但在模板中的元素实际添加到 DOM 之前：

jQuery("#submit-form-table select.select2_category").select2();

由于您使用的是带有 jQ​​uery 文件上传的模板，我假设您使用的是 UI 版本。该版本添加了“fileuploadadded”事件。 （注意末尾的“ed”。）我认为您想绑定到该事件，而不是“fileuploadadd”事件。

来自documentation：

added 回调等效于 add 回调，并且是 在上传模板被渲染并且 过渡效果已完成。

【讨论】：

嗯，你的答案是正确的，我得到了解决方案。我在 api 中找到了 fileuploadadd 回调，它的工作正常 jQuery('#submit_form').bind('fileuploadadd', function() jQuery("#submit-form-table select.select2_category").select2(); ) ;感谢您的回答:)