Boostrap实现下拉框效果

mac2024-02-23  43

首先看下实现效果:

效果如上,下面是实现的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

欢迎关注我的博客,一起学习,共同进步,谢谢。

最新回复(0)