Select2 组件无法正常工作

Question

当打开同一个modal bootstrap级联window的多个实例时，select2组件的初始化在最后一个window中正常工作。 在之前的 windows 中，组件停止工作。 为了初始化组件，我获取了模态 window 的最后一个实例并设置了 dropdownParent 属性。 它应该适用于所有打开的 windows，但它只适用于最后一个打开的。

有谁知道如何解决这个问题？

谢谢：）

//get the last instance of the modal window
var lastModal = $('body').children('.generic-modal').last();

//get the select component
var selFormaContatoControleTipo = lastModal.find('.sel-forma-contato-controle-tipo');

//Initialize
selFormaContatoControleTipo.select2({
    tags: "true",
    createTag: function () {
        // Dessabilita a inserção quando Enter for pressionada
        return null;
    },
    placeholder: "Selecione uma opção",
    allowClear: false,
    width: '100%',
    dropdownParent: lastModal,
    language: {
        noResults: function () {
            return "Nenhum resultado encontrado";
        }
    }
});

<div class="col-md-3">
    <label asp-for="FormaContatoControleTipo" class="control-label">Tipo de Controle</label>
    <select asp-for="FormaContatoControleTipo" asp-items="Model.FormasContatosControlesTipos" title="Selecione uma opção" class="form-control sel-forma-contato-controle-tipo" style="position: fixed !important;"><option value=""></option></select>
    <span asp-validation-for="FormaContatoControleTipo" class="text-danger"></span>
</div>

视频：

https://imgur.com/a/v0GM9JH

Answer 1

由于没有得到反馈，我意外地发现问题是由于 select id 引起的。 The ASP.NET razor creates the id and name automatically, but I was calling the component by the class name '.sel-forma-contato-controle-tipo'... When opening the modal window more than once, automatically, there were identical ids ...初始化插件时，相同id的其他元素也发生了变化...

$("input:text, input:radio, input:checkbox, select").each(function () {
    var oldId = $(this).attr("id");
    $(this).attr("id", oldId + getQuantityOfGenericModals());
});

解决方案是更改页面上所有元素的 id，包括选择。 我希望这可以帮助其他有同样问题的人。