Boostrap实现下拉框效果

最新推荐文章于 2022-06-06 23:25:30 发布

Burgess_Lee

最新推荐文章于 2022-06-06 23:25:30 发布

阅读量267

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/Burgess_Lee/article/details/102831284

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先看下实现效果：

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

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

Burgess_Lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Boostrap实现下拉框效果

首先看下实现效果：效果如上，下面是实现的index页面中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉搜索框</title> <!-- 最新版本的 Bootstrap 核心 C...
复制链接

扫一扫

专栏目录