bootstrap-select 设置全选全不选搜索框 header 关于全选按钮不显示问题=bootstrap-select.js不是完整的建议去官网下载完整版本的js和css

原创于 2018-03-27 15:23:26 发布 · 6.2k 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery和Bootstrap实现的可搜索多选下拉列表插件。该插件允许用户通过搜索框快速查找并选择列表项，并支持全选、全不选等操作。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery bootstrap-select可搜索多选下拉列表插件</title>
    <script src="../js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../js/bootstrap-select.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-select.css"/>
    <link href="../css/dist/css/bootstrap.css" rel="stylesheet"/>
    <script src="../css/dist/js/bootstrap.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.selectpicker').selectpicker({
                'selectedText': 'cat',
                header: 'Select a condiment',
                'noneSelectedText': '请选择',
                'deselectAllText': '全不选',
                'selectAllText': '全选'
            });
        });
    </script>
</head>
<body>
<select class="selectpicker" multiple data-live-search="true" data-actions-box="true">
    <option>name</option>
    <option>addr</option>
    <option>email</option>
    <option selected>phone</option>
    <option>tel</option>
</select>
</body>
</html>