Странное поведение bootstrap selectpicker

Я использую приведенный ниже 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, которые вызывают у меня проблемы, все работает отлично.

Ниже приведен снимок экрана дисплея, который я получаю: Странное поведение bootstrap selectpicker

Ваш фрагмент кода работает неправильно, или я не могу понять вашу проблему. Исправьте код или объясните подробнее. "Как мне добавить элементы в список ???"

Amin Kamalinia 07.07.2018 08:45

Это весь код был слишком длинным для вставки, поэтому я изолировал части, относящиеся к моему выбору Bootstrap. В основном у меня есть 15 выбранных элементов, питаемых от контроллера. Бесплатные карты плохо отображаются (см. Снимок экрана).

Patrice 07.07.2018 21:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
284
1

Ответы 1

Изменение раскрывающегося списка параметров моей функции (MenusDeroulants) на $ dropdown наконец решило проблему.

Другие вопросы по теме