Bootstrap-Select 不显示所选选项旁边的刻度（多个）答案

【问题标题】：Bootstrap-Select Does not shows ticks next to selected options(Multiple)Bootstrap-Select 不显示所选选项旁边的刻度（多个）
【发布时间】：2014-11-26 09:04:17
【问题描述】：

我的选择器有问题，我定义为：

 <select name='provs[]' id="prov" class="selectpicker" data-live-search="true" required multiple>

但是，当我选择数据时，它不会显示选项旁边的勾号。我正在使用带有 bootstrap-select 的 bootstrap 2.3.2。我将它们的 css 和 js 添加到我的断言中。我可以选择并获取值，但是，当我选择它们时，我无法看到选项旁边的勾号。

干杯，

【问题讨论】：

标签： css twitter-bootstrap bootstrap-select

【解决方案1】：

浏览您正在使用的脚本总是明智的，即使它们没有多大意义，但过一段时间就会有意义。

参考：https://github.com/caseyjhol/bootstrap-select/blob/master/bootstrap-select.js

查看第 942-965 行并定位到底部附近：

$.fn.selectpicker.defaults = {
.... // bunch of default settings
iconBase: 'glyphicon', // the font family for the checkmark
tickIcon: 'glyphicon-ok', // classname for the checkmark
...
};

这默认为 glyphicon，是 Bootstrap 3 的一部分。您需要安装此字体，或者您可以使用 Font Awesome（访问他们的网站，按照说明进行操作）并在调用脚本时更改这两个值：

 $('.selectpicker').selectpicker({
   iconBase: 'NameofFOnt',
   tickIcon: 'classname'
});

【讨论】：

但是，我使用 Bootstrap 2.3.2 已经快一年了，这个功能以前可以工作。突然那些蜱虫消失了。
在同一个网站上？相同版本的插件？
尝试将选择上的类更改为 class="selectpicker show-tick"（与 "selectpicker" 相比）
它也无济于事。当我添加 show-tick 时没有任何变化。
对于 Font-Awesome，使用 iconBase 作为 'fontawesome' 和 tickIcon 作为 'fa fa-check'。

【解决方案2】：

这个“问题”在 Bootstrap 4 中仍然存在，因为 Bootstrap-select 使用 Glyphicon。把所有答案放在一起，这对我有帮助（BS4.3.1，fa 5.7.1，BS-select 1.13.8）：

<select data-icon-base="fas" data-tick-icon="fa-check">

使用提到的蛇盒here

【讨论】：

与 Bootstrap 4 一起使用时，bootstrap-select v1.13.0+ 使用纯 CSS 解决方案来创建刻度图标（而不是 Glyphicon）。

【解决方案3】：

在您的 HTML 页面中添加 Font Awesome css。

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

并在 bootstrap-select.js 和 bootstrap-select.min.js 中替换它们

iconBase: 'glyphicon', tickIcon: 'glyphicon-ok'

到

iconBase:"fontawesome",tickIcon:"fa fa-check"

【讨论】：

如果您使用来自 CDN 的脚本，则没有帮助。另外，无论如何都不建议更改文件。

【解决方案4】：

如果您说的是通过 CDN 的方式，这就是解决方案：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"type="text/javascript"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"rel="stylesheet" type="text/css" />
    <script>
        $(function () {
            $('#lstFruits').multiselect({
                includeSelectAllOption: true
            });
            $('#btnSelected').click(function () {
                var selected = $("#lstFruits option:selected");
                var message = "";
                selected.each(function () {
                    message += $(this).text() + " " + $(this).val() + "\n";
                });
            });
        });
    </script>

    <style>


    </style>



</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <form action="#" method="POST">
                        <div class="form-group row">
                            <div class="col-sm-10">
                                <select class="form-control selectpicker" id="select-country lstFruits" multiple="multiple" data-live-search="true" >
                                    <option data-tokens="china">China</option>
                                    <option data-tokens="malayasia">Malayasia</option>
                                    <option data-tokens="singapore">Singapore</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

如果您想添加图标离线文件以便通过导入导入图标，只需将以下代码放在引导 css 上方即可。

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

【讨论】：