bootstrap实现带搜索的下拉框

最新推荐文章于 2023-09-18 17:54:31 发布

鑫~阳的技术博客

最新推荐文章于 2023-09-18 17:54:31 发布

阅读量2.6k

点赞数 1

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_41765786/article/details/104775482

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在bootstrap官方文档中没有找到关于带搜索的下拉框，在这里找到了一个bootstrap插件：bootstrap-select,非常好用。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>bootstrap-select</title>
  <!-- jquery -->
  <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  <!-- bootstrap -->
  <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
  <!-- bootstrap-select -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
</head>
 
<body>
  <select class="selectpicker show-tick form-control" data-live-search="true">
    <option>香樟</option>
    <option>银杏</option>
    <option>雪松</option>
    <option>黑松</option>
    <option>银木</option>
    <option>桂花</option>
  </select>
</body>
 
</html>

运行效果如下：
在这里插入图片描述
如果select是通过ajax获得，则需要在ajax中加入（ajax动态获取options选项后，需要refresh刷新页面才可以显示出来options）

$('.selectpicker').selectpicker('refresh');

鑫~阳的技术博客

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
bootstrap实现带搜索的下拉框

在bootstrap官方文档中没有找到关于带搜索的下拉框，在这里找到了一个bootstrap插件：bootstrap-select,非常好用。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w...
复制链接

扫一扫