因为最近在写工具箱,所以研究了几种搜索功能,找到这款bootstrap下拉搜索还不错,所以分享给大家
<!DOCTYPE html> <html> <head> <title>bootstrap下拉搜索demo</title> </head> <body> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <select id="basic" class="selectpicker" data-live-search="true"> <option data-subtext="1">1</option> <option data-subtext="2">2</option> <option data-subtext="3">3</option> <option data-subtext="这是测试">这是测试</option> <option data-subtext="zscs">zscs</option> </select> <script type="text/javascript"> $('.selectpicker').on('changed.bs.select',function(e){ //返回选中内容 alert($('#basic').val()); }); </script> </body> </html>
发表评论: