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。 ASP.NET razor 自动创建 id 和名称，但我通过 class 名称调用组件 '.sel-forma-contato-controle-tipo' ...打开模态时 window不止一次，自动，有相同的ids ...初始化插件时，相同id的另一个元素也被改变了...

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

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

Select2 组件无法正常工作

Select2 component is not working correctly

javascript

jquery

select

bootstrap-modal