Select2 与 Formsets 一起工作不正确

Posted 2023-05-07

【中文标题】Select2 与 Formsets 一起工作不正确

【英文标题】：Select2 working incorrectly with Formsets

【发布时间】：2021-10-09 11:16:49

【问题描述】：

我有这样的脚本，而且这个脚本只使用第一种形式，其他的被冻结并且根本不起作用。

$(document).ready(function() 
    $('#id_membership-0-company').select2();
);

我无法将 # 更改为 .因为每个新表单都有新的 id，比如id_membership-0-company、id_membership-1-company 等等，而且我所有的表单都有相同的类（这个字段没有单独的类）

我无法在此函数中添加所有 id，因为它仅在页面加载时有效，因此只有 id 0 会以这种方式工作

我试图做这样的事情：在“添加表单”按钮 html 标记中添加onclick="addRow()"，并在脚本中添加此代码。如果没有 Timeout 功能，它不起作用，因为脚本执行速度太快。 它适用于两个表单（如果我按“添加表单”按钮），但如果我添加更多 id 则不起作用（在这种情况下，在第二个表单之后为此字段创建了更多不正确的表单）

function addRow() 
    function activateForms()
        $('#id_membership-0-company').select2();
        $('#id_membership-1-company').select2();
        
        setTimeout(activateForms, 1000);
    

如何解决这个问题？每个表单的第一个字段都需要 select2 小部件吗？

【问题讨论】：

你可以使用简单的$('select').select2();

@SimoneRossaini，我试过了，只有第一个表单适用于此代码

您能告诉我们单击“添加表单”时会发生什么吗？ （这会触发 ajax 调用等）所以我可以最好地格式化你的答案

如果我这样做：$(document).ready(function() $('select').select2(); ); 只有第一种形式可以工作，其他形式只是冻结，我无法选择某些内容。如果我在添加按钮添加表单后创建超时或触发功能，它的行为会很奇怪并创建许多多余的表单，有些正在工作，有些被冻结

【参考方案1】：

我为你创建了一个小例子，所以你可以适应你的代码。

$(document).ready(function() 
  $('select').select2();
);

$('.addSelect').on('click', function() 
  const arr = [
      val: 1,
      text: 'One'
    ,
    
      val: 2,
      text: 'Two'
    ,
    
      val: 3,
      text: 'Three'
    
  ];

  const sel = $('<select>').appendTo('.container');
  $(arr).each(function() 
    sel.append($("<option>").attr('value', this.val).text(this.text));
  );  
  $(sel).select2();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class='container'>
  <select>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>
<button class='addSelect'>Add Select2</button>

【讨论】：

我能否将对象传递给const arr，因为我的<select> 和<option> 标签是自动生成的？

这只是一个示例，您可以在使用脚本将选择附加到页面后添加$('select').select2();。

我用 django formset 附加我的表单，所以如果我每次添加表单时都触发$('select').select2();，那么会生成许多表单，其中一些正在工作，有些则没有

您可以像我的更新示例一样使用sel。

如果我只创建 $('select').select2(); 第一个激活的表单，但其他的很混乱，其中一些作为 select2 工作，其中一些冻结，一些只是没有 select2 我发现如果我激活表单使用$('select').select2(); 添加所有表单后它可以工作，但我不知道如何让它适用于每个单独的表单