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

c8ib6hqw  于 2022-12-22  发布在  jQuery
关注(0)|答案(6)|浏览(135)

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

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

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

我怎样编辑上面的代码,使select2能为我添加的表单工作?

szqfcxe2

szqfcxe21#

对我有效的方法是在on.click文档末尾的formset脚本之后添加一条www.example.com语句来调用class .add-row的select 2。

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

不确定它是否仍然与您相关,只是添加了以防有人也发现这个。对于您的情况,只需将“. forselect 2 "替换为”select 2“,看看它是否有效。

zaqlnxep

zaqlnxep2#

根据我的个人经验,Django-Dynamic-Formset在同一领域的其他应用/工具中表现不佳,在某些情况下,当其他JS存在时,需要进行大量修改才能使其正常工作。
看看这个:(这个使用的是django_select2而不是select2)https://github.com/anneFly/django-dynamic-formset-select2-poc
它已经有一段时间没有更新了,但是你可以在最后看到它解决了一些冲突。

aor9mmx1

aor9mmx13#

为了防止其他人也需要这个,从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模式。

gg58donl

gg58donl4#

使用此代码创建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:**在正文中包含select 2 js/css
**注意2:**更改代码中的formsetName条件

iszxjhcz

iszxjhcz5#

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

kmpatx3s

kmpatx3s6#

经过大量的调试,我终于可以让Django动态表单集工作了。
如果空表单是隐藏的(实际情况就是这样),而你在空表单上调用select2,它就不能正确呈现。尝试只在可见的选择域上调用select2
所以,如果你的类名是multiselectbox,试着使用类似这样的代码:

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

相关问题