Select2 组件无法正常工作答案

【问题标题】：Select2 component is not working correctlySelect2 组件无法正常工作
【发布时间】：2021-07-15 03:49:44
【问题描述】：

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

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

谢谢:)

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

【问题讨论】：

标签： javascript jquery select bootstrap-modal

【解决方案1】：

由于没有得到反馈，我偶然发现问题出在选择 ID 上。 ASP.NET 剃须刀自动创建 id 和名称，但我通过类名“.sel-forma-contato-controle-tipo”调用组件...当多次打开模态窗口时，自动，有相同的ids ...初始化插件时，相同id的其他元素也发生了变化...

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

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

【讨论】：