Bootstrap选择器奇怪的行为

Question

我使用下面的JS为我的select提供选项：

​

//**** 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个组合在一起，但总会有一些东西。

更奇怪的是，如果我使用"{ controleur："Sexes"，element："Sexe“}，”来填充给我问题的所有3个，所有的都工作得很好。

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

​

Answer 1

将我的函数(MenusDeroulants)参数dropdown改为$dropdown，最终解决了这个问题。