javascript - Bootstrap selectpicker 奇怪的行为

Question

我正在使用以下 JS 为我的选择提供选项:

//**** Instance des Bootstrap-SelectPicker ****
    $('.selectpicker').selectpicker({
        style: 'btn-info',
        size: 4,
        showSubtext: true,
        noneSelectedText: 'Pas de sélection',
        showSubtext: true,
        showTick: true,
    });

var menus = [
            { controleur: "CatDdeurs", element: "Cat_Ddeur" },
            { controleur: "Communautes", element: "Communaute" },
            { controleur: "Occupations", element: "Occupation" },
            { controleur: "Provinces", element: "Province" },
            { controleur: "Scolarites", element: "Scolarite" },
            { controleur: "Sexes", element: "Sexe" },
            { controleur: "Situations_Matrimoniales", element: "SituationMatrimoniale" },
            { controleur: "Source_De_Revenus", element: "SrceRevenu" },
            { controleur: "Statuts_Legaux", element: "StatutLegal" },
            { controleur: "Tranche_Revenu", element: "TrancheRevenu" },
            { controleur: "Villes", element: "Ville" },
            { controleur: "Sources_Informations", element: "SceInfo" },
            { controleur: "Langues", element: "langMaternelle" },
            { controleur: "Langues", element: "LangAutre" },
            { controleur: "Conseillers", element: "Conseiller" },
        ];

        menus.forEach(x => {
            MenusDeroulants('GetListe' + x.controleur, $('#cbx_' + x.element));
        });
        
//**** Permet de remplir la liste des menus déroulants ****
        function MenusDeroulants(url, dropdown) {
            $.getJSON(url, function (data) {
                dropdown.empty();

                for (var i = 0; i < data.length; i++) {
                    var obj = data[i];
                    for (var key in obj) {
                        var prenom;
                        var nom;
                        var ID;
                        //**** Traitement des demandeurs ou conseillers ****
                        if (url == "GetListeConseillers" || url == "GetListeDemandeurs") {
                            //**** Retrait du code ****
                            if (key == 'Code_Conseiller' || key == 'Code_Demandeur') {
                                ID = obj[key];
                            };
                            //**** Retrait du Nom ****
                            if (key == 'Nom_Conseiller' || key == 'Nom_Demandeur') {
                                //if (key.match(/Nom_C*/) || key.match(/Nom_D*/)) {
                                nom = obj[key];
                            };
                            //**** Retrait du Prénom ****
                            if (key == 'Prenoms_Conseiller' || key == 'Prenoms_Demandeur') {
                                prenom = obj[key];
                            };
                        } else {    //**** Traitement des autres menus ****
                            //**** Retrait de l'ID ****
                            if (key.match(/ID_*/)) {//**** Traitement des demandeurs ou conseillers ****
                                ID = obj[key];
                            };
                            //**** Retrait du Nom ****
                            if (key.match(/Nom_*/)) {
                                nom = obj[key];
                            };
                        };
                    }
                    //**** On construit les options du menu déroulant ****
                    if (url == "GetListeConseillers" || url == "GetListeDemandeurs") {
                        dropdown.append($("<option></option>").attr("value", ID).text(nom).attr("data-subtext", prenom));
                    } else {
                        dropdown.append($("<option></option>").attr("value", ID).text(nom));
                    };
                    if ((nom.toUpperCase() == "CHICOUTIMI" && url == 'GetListeVilles')
                        || (nom.toUpperCase() == "QUÉBEC" && url == 'GetListeProvinces')
                        || (nom.toUpperCase() == "NON DISPONIBLE" && url != 'GetListeVilles' && url != 'GetListeProvinces')) {
                        dropdown.prop("selectedIndex", i);
                    };
                }
                dropdown.selectpicker('refresh');
            });
        }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<td style="padding-left:10px">
                                                    <div class="form-group">
                                                        <label for="cbx_Sexe" class="control-label">Sexe:</label>
                                                        <div>
                                                            <select class="selectpicker" id="cbx_Sexe"></select>
                                                        </div>
                                                    </div>
                                                </td>

前 12 个元素可以正常工作，但一旦我添加最后 3 个元素，我的选择就会开始表现得很奇怪:3 个鞋楦有时可以正常工作，有时会在框顶部显示一个空白区域。

有时，当我打开其他菜单时，菜单不会关闭......等等。

我试过将 12 个鞋楦与 3 个鞋楦结合起来，但总会有一些东西。

更奇怪的是，如果我使用 let say : "{ controleur: "Sexes", element: "Sexe"},"来填充给我问题的所有 3 个，一切都完美无缺。

下面是我得到的显示屏幕截图:

Answer 1

将我的函数 (MenusDeroulants) 参数下拉列表更改为 $dropdown 终于解决了这个问题。