Bootstrap-Select未显示多选选项旁边的勾选标记

Question

Bootstrap-Select未显示多选选项旁边的勾选标记

6

我有一个选择器的问题，它如下定义：

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

然而，当我选择数据时，选项旁边没有显示勾号。我使用的是bootstrap 2.3.2和bootstrap-select。我已经将它们的css和js添加到我的资产中。我可以选择并获取值，但是在选择它们时看不到选项旁边的勾号。

祝好，

- Ducaz035

4个回答

6

在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">

使用下划线命名法，如在此处所述。

- p_reim

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

2

在你的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'

to

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

- Saurabh Mistry

如果您正在使用CDN中的脚本，则此内容无法帮助您。而且，更改文件也不建议这样做。 - Studocwho

0

如果你在谈论通过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>

如果您想添加离线文件中的图标，以便可以通过导入导入图标，请将以下代码放置在您的Bootstrap CSS之上。

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

- Sabaoon Bedar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christina · Accepted Answer

即使你使用的脚本并不重要，浏览一下也是明智的，过一段时间后它们就会有意义。

参考：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
...
};

这默认使用了 Bootstrap 3 中的 glyphicon。您需要安装此字体，或您可以使用 Font Awesome（前往其网站，按照说明操作），并在调用脚本时更改两个值：

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