Bootstrap selectpicker strange behavior

Question

I'm using the below JS to feed options for my 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> 

The first 12 elements will work fine but as soon as I add the 3 last, my selects will start behaving funny: The 3 lasts will sometimes work fine and some times show a white space on top of the box.

Sometimes, menus will not close when I open others... and so on.

I have tried combining the 12 first with each of the 3 lasts but there will always be something.

More strange is that if I use let say : "{ controleur: "Sexes", element: "Sexe" }," to fill all 3 that are giving me issue, all works perfectly.

Below is a screenshot of the display I'm getting:

Answer 1

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