首先看下实现效果:
效果如上,下面是实现的index页面中的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉搜索框</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="./bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet"> </head> <body> <label for="id_select">下拉框:</label> <select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true"> <optgroup> <option>123</option> <option>456</option> <option selected>789</option> </optgroup> </select> <!-- 引入Jquery文件 --> <script src="./jquery/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="./bootstrap/js/bootstrap.min.js"></script> <script src="./bootstrap-select/js/bootstrap-select.js"></script> <script> $(window).on('load', function () { $('.selectpicker').selectpicker({ 'selectedText': 'cat' }); // $('.selectpicker').selectpicker('hide'); }); </script> </body> </html>引用文件链接详见Github,请移步Github进行下载。下载案例地址是:
git@gitee.com:burgesslee131/bootstrap-select.git
欢迎关注我的博客,一起学习,共同进步,谢谢。