Select2 与 Formsets 一起工作不正确

Question

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

$(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 小部件吗？

Answer 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>