引导多选不是一个功能 - 不检查多选脚本

Posted

技术标签:

【中文标题】引导多选不是一个功能 - 不检查多选脚本【英文标题】:Bootstrap multiselect is not a function - not checking the multiselect script 【发布时间】:2019-08-24 01:15:58 【问题描述】:

几天前我发布了this 问题,关于如何让引导多选功能正常工作。我下载了多选脚本,但我仍然收到multiselect is not a function 但是,根据浏览器控制台,它没有读取多选脚本。

根据this answer,我尝试重新排列脚本加载顺序,但也没有解决问题。

这是我的 html 和脚本代码:

<head>
    <link href="~/Content/Style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap-multiselect.js"></script>
</head>

<select id="chkveg" multiple="multiple">
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

<script>
    $(function () 
        $('#chkveg').multiselect(
            includeSelectAllOption: true
        );
    );
</script>

这是浏览器控制台(所有内容都已加载):

对这个问题有什么想法吗?谢谢。

【问题讨论】:

您使用的是什么版本的引导程序和引导程序多选? 我正在使用这个github.com/davidstutz/bootstrap-multiselect 还有bootstrap的版本? 根据 NuGet,3.4.1,但是我可以将其更新到 4.3.1 Modernizr 是一个浏览器兼容性检测框架,可让您利用尚未广泛支持的新功能。例如,您可以使用modernizr 来检测加载页面的浏览器是否支持webp 图片格式。然后,您可以加载 webp 图像以加快页面加载速度。您可以在此处查看modernizr 功能的完整列表。 modernizr.com/download?setclasses 【参考方案1】:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

    <select multiple="multiple" id="chkveg">
       <option value="test1">Test 1</option>
       <option value="test2">Test 2</option>
       <option value="test3">Test 3</option>
    </select>

    <script>
       $(document).ready(function() 
           $('#chkveg').multiselect(
              includeSelectAllOption: true
            );
        );

    </script>

在为我工作的 jsfiddle 中尝试了上面的代码

【讨论】:

感谢您的回答!我试图避免使用外部资源,我希望在我的内部设置中使用脚本

以上是关于引导多选不是一个功能 - 不检查多选脚本的主要内容,如果未能解决你的问题,请参考以下文章

添加多个字段时,HTML多选下拉菜单Jquery和样式不起作用

基于第一个下拉菜单的引导多选动态选项

select2插件多选不换行

引导多选列表不会为 Rails 打开

引导模式中的Angularjs多选下拉菜单

流程上的引导多选更新选项列表