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，包括選擇。 我希望這可以幫助其他有同樣問題的人。