BootStrap-select中selectpicker不显示下拉信息

<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>CSCEC8B-GD-CM</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- 引入jQuery -->
        <script src="/static/plugins/jquery.slim.js"></script>
        <link rel="stylesheet" href="/static/css/bootstrap4.min.css">
        <script src="/static/plugins/bootstrap4.bundle.min.js"></script>
        <!-- 引入Bootstrap Select CSS -->
        <link rel="stylesheet" href="/static/css/bootstrap-select.css">
        <!-- 引入Bootstrap Select JS -->
        <script src="/static/plugins/bootstrap-select.js"></script>
    </head>
    <body>
        <div class="accordion-body">
            <label for="boq_type_id">类别
                <select name="selectpicker_boq" class="selectpicker" id="selectpicker_id" multiple="multiple">
                </select>
            </label>
        </div>
        <script>
            $(document).ready(function() {
                $('.selectpicker').selectpicker();
            });
            //数据赋值
            var select = $("#selectpicker_id");
            select.append("<option value='1'>一级标题</option>");
            select.append("<option value='2'>二级标题</option>");
            select.append("<option value='3'>三级标题</option>");
            select.append("<option value='4'>四级标题</option>");
            select.append("<option value='5'>清单</option>");
            select.append("<option value='6'>定额</option>");
        </script>
    </body>
</html>
image.png

如果只显示上图,不能下拉,就要检查bootstrap版本是不是和bootstrap-select匹配,2024年5月用bootstrap-select 5.是不能正常使用的,4可以。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容