Select2与Formsets一起工作不正确

Question

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

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

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

我不能在这个函数中添加所有的id因为它只在页面加载时起作用所以只有id 0才会起作用

我试着这样做:添加onclick="addRow()"内"添加表单"按钮HTML标签和脚本中的此代码。如果没有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>