Question

我的以下代码在控制台中未显示错误，但selectpicker元素不会显示。但是，每当我删除对引导程序选择文件的引用时，它就会起作用（无需引导程序格式）。我编码有误吗？

@{
    ViewBag.Title = "Menu: Conseiller";
}

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <meta charset="UTF-8">

    <script src="~/Scripts/jquery-3.3.1.min.js"></script> @**** Version de JQUERY utilisée **** *@

    @* **** Lien Handlebars **** *@
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>

    @* **** Référence Bootstrap-Select menus déroulants CSS / js **** *@
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-fr_FR.min.js"></script>


    @* *********Script pour les menus déroulants********************* *@
    <script type="text/javascript">
        templateVilles = null;
        templateProvinces = null;

        //***************************** villes
        $(function () {
            templateVilles = Handlebars.compile($("#VillesTemplate").html());

            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
            });

            $.getJSON("../Admin/GetListeVilles", null, function (data) {
                var result = templateVilles(data);
                console.log(data);
                $("#VillesOutput").html(result);
            });
        });

        //***************************** provinces
        $(function () {
            templateProvinces = Handlebars.compile($("#ProvincesTemplate").html());

            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
            });

            $.getJSON("../Admin/GetListeProvinces", null, function (data) {
                var result = templateProvinces(data);
                $("#ProvincesOutput").html(result);
            });
        });

    </script>
</head>
<body>
    @* ********** Liste des villes ************************* *@
    <script id="VillesTemplate" type="text/x-handlebars-template">
        <table>
            {{#each}}
            <tr>
                <td>{{Nom_Ville}}</td>
            </tr>
            {{/each}}
        </table>
    </script>

    @* ********** Liste des provinces ************************* *@
    <script id="ProvincesTemplate" type="text/x-handlebars-template">
        <select id="cbx_Prov" class="selectpicker" data-live-search="true"
                data-live-search-style="contains" data-live-search-normalize="true">
            {{#each}}
            <option value="{{ID_Province}}">{{Nom_Province}}</option>
            {{/each}}
        </select>
    </script>

    @* **** Affichage **** *@
    <div id="ProvincesOutput" style="border:solid 2px red"></div>
    <table>
        <tr>
            <th>Villes:</th>
        </tr>
        <tr>
            <td>
                <div id="VillesOutput"></div>
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        $('.selectpicker').selectpicker({
            style: 'btn-info',
            size: 4,
            showSubtext: true,
            noneSelectedText: 'Pas de sélection',
            showSubtext: true,
            showTick: true,
        });
        $('.selectpicker').selectpicker('refresh');
    </script>

</body>
</html>

在浏览器的元素窗口中，我可以在其中看到选择元素，但未显示。

Bootstrap selectpicker不与Handlebars.js一起显示

0 个答案: