如何在同一页面中同时使用 Django Dynamic Formset 和 Select2？

Posted 2023-02-24

【中文标题】如何在同一页面中同时使用 Django Dynamic Formset 和 Select2？

【英文标题】：How do I use Django Dynamic Formset and Select2 together in the same page?

【发布时间】：2017-06-30 07:27:43

【问题描述】：

我已经成功分别使用了 Django Dynamic Formset 和 Select2。但是，当我使用 select2 并在我的表单集中动态添加更多表单时，添加的表单不适用于下拉菜单。我点击了它们，但下拉菜单打不开。

<script type="text/javascript">
    $(function() 
        $('.trt').formset();
    );

    $('select').select2();
</script>

如何编辑上述代码，以便 select2 适用于我添加的表单？

【参考方案1】：

使用 SetTimeout() 完成。将 select2() 设置为延迟 100 毫秒后的所有选择组件

【参考方案2】：

以防万一其他人想要这个，使用来自 here 的灵感，这个解决方案使用标准 JQuery、formset.js 和 select2 为我工作，用于 n 个额外的行：

<script src='% static "js/jquery.formset.js" %'></script>
<script type="text/javascript">
    $('.formset_row- formset.prefix ').formset(
        addText: 'add another',
        deleteText: 'remove',
        prefix: ' formset.prefix ',
        added: function($row) 
            $('#id_allowance-'+$row[0].rowIndex+'-accounts').select2( width:'resolve');
        
    );
</script>

您需要更改 id 连接函数以匹配您自己的 id 模式。

【参考方案3】：

将此代码用于 django 内联管理表单

 <script type="text/javascript"> 

      django.jQuery(document).on('formset:added', function(event, $row, formsetName)  
           if (formsetName == 'usereds_set'   )
              $(".inline-related #id_"+$row.attr('id')+ "-eds" ).select2( width:'resolve');   
            
      );


 </script>

注意 1： 在你的正文中包含 select2 js/css

注意2：在代码中改变formsetName条件

【参考方案4】：

对我有用的是在文档末尾的 formset 脚本之后添加一个 on.click 语句来调用类 .add-row 的 select2。像这样：

<script>
$( ".add-row" ).click(function() 
  $('.forselect2').select2();
);
</script>

不确定它是否仍然与您刚刚添加的内容相关，以防有人也发现它。对于您的情况，只需将 '.forselect2' 替换为 'select2' 并查看它是否有效。

【讨论】：

它仍然对我有用。请详细说明您认为不会的原因。

这只会工作一次，在选项添加到内联选择框之前触发超过 2 个动态元素事件之后。或者有时它会与其他 JS 事件发生冲突。有一个名为 formset 的事件：为此添加了

它适用于我添加多个元素，但从未尝试过超过十个，但每次选择框都正确填充。不过，我并没有将它与内联管理表单一起使用，只是用于常规表单或表单集。

【参考方案5】：

我可以根据我的个人经验告诉您，Django-Dynamic-Formset 在同一领域的其他应用程序/工具中表现不佳。在某些情况下，当存在其他 JS 时，需要进行大量更改才能使其正常工作。

看看这个：（这个是使用 django_select2 而不是 select2） https://github.com/anneFly/django-dynamic-formset-select2-poc

它已经有一段时间没有更新了，但你可以在最后看到它解决了一些冲突。