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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

以防万一其他人想要这个，利用来自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 模式。

Answer 4

将此代码用于 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：在你的body中包含select2 js/css

注2：更改代码中的formsetName条件

Answer 5

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

Answer 6

经过大量调试后，我终于可以让 Django 动态表单集工作了。

如果空表单被隐藏（将是这种情况）并且您在空表单上调用 select2，则它不会正确呈现。尝试仅在可见的选择字段上调用 select2。

因此，如果您的类名是 multiselectbox，请尝试使用如下内容：

$('.multiselectbox:visible').select2();

Answer 7

对于仍然遇到此问题的人，我找到了不同的解决方案： 检查空表单元素是否在其选择输入中初始化了 select2 如果是，则使用

销毁它

$('your_empty_form').find('select').select2('destroy') 销毁 select2 后，克隆该表单并在该输入上重新初始化 select2

let newSelectEl = (`#id_your-${prefix}-id`)
newSelectEl.select2()

这解决了我的问题