Boostrap實現下拉框效果

首先看下實現效果：

效果如上，下面是實現的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進行下載。下載案例地址是：

[email protected]:burgesslee131/bootstrap-select.git

歡迎關注我的博客，一起學習，共同進步，謝謝。

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

智能推薦

vue實現下拉框動態篩選

實現效果如下：具體代碼入下： 1、其中：filterable :filter-method="dataFilter"為過濾的關鍵 2、dataFilter的方法首先要初始化一個approveUserOption，并且讓optionsCopy = approveUserOption。如果為則給optionsCopy 復制approveUserOption。...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

Boostrap實現下拉框效果

智能推薦

猜你喜歡