6

我对选择器有一个问题，我将其定义为： 

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

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

干杯，

4

4 回答 4

8

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

参考：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'
});
于 2014-10-01T14:16:25.947 回答
5

This "problem" still exists within Bootstrap 4 as Bootstrap-select uses Glyphicon. Putting together all the answers this helped me (BS4.3.1, fa 5.7.1, BS-select 1.13.8): 

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

Use the snake case as mentioned here

于 2019-03-27T06:58:03.043 回答
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'

至

iconBase:"fontawesome",tickIcon:"fa fa-check"
于 2018-01-12T07:51:28.820 回答
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>

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

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
于 2022-01-03T08:47:47.320 回答