<!DOCTYPE html>

<html>

<head>

    <title>jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com</title>

    <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>

    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css">    

    <!-- 3.0 -->

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  

    <!-- 2.3.2

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>

    -->

    <script type="text/javascript">

        $(window).on('load', function () {  

            $('.selectpicker').selectpicker({

                'selectedText': 'cat'

            });  

            // $('.selectpicker').selectpicker('hide');

        });

    </script>

</head>

<body>

    <label for="id_select">Test label YEag</label>

    <select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">

        <option>cow</option>

        <option>bull</option>

        <option class="get-class" disabled>ox</option>

        <optgroup label="test" data-subtext="another test" data-icon="icon-ok">

            <option>ASD</option>

            <option selected>Bla</option>

            <option>Ble</option>

        </optgroup>

    </select>  

    <div class="container">

        <form class="form-horizontal" role="form">

            <div class="form-group">

                <label for="bs3Select" class="col-lg-2 control-label">Test bootstrap 3 form</label>

                <div class="col-lg-10">

                    <select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">

                        <option>cow</option>

                        <option>bull</option>

                        <option class="get-class" disabled>ox</option>

                        <optgroup label="test" data-subtext="another test" data-icon="icon-ok">

                            <option>ASD</option>

                            <option selected>Bla</option>

                            <option>Ble</option>

                        </optgroup>

                    </select>

                </div>

              </div>

        <form>

    </div>  

</body>

</html>

相关bootstrap-select的js，css在http://www.bootcdn.cn/bootstrap-select/

BootStrap下拉框搜索功能的更多相关文章

  1. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  2. 使用jquery select2实现下拉框搜索功能

    由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...

  3. 下拉框搜索插件chosen

    {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. 浅解bootstrap 下拉框插件

    最近的业务需求是把后台数据渲染到前端,其中有一个是复选框数组,前端选择渲染的方式是bootstrap的下拉插件 渲染完成之后,此时会在原有select同级上面生成buton,dropdown-menu ...

  5. laravel7 jqAjax下拉框搜索

    html: 设置页面改变事件 <div id="show"> <div class="page-container" style=" ...

  6. Bootstrap 下拉框点击没反应

    应该是第一次点击下拉框没反应,我把HTML复制出来单独运行,都是好的,就是在项目里面无法运行 哪里的js出问题了?找不到原因,控制台里的js也不报错 解决方法: $(function () { $(' ...

  7. Bootstrap：解决Bootstrap下拉框需要双击才能打开的问题

    当使用AngularJS和Bootstrap时,会发生菜单栏navbar控件 需要点击两下才能打开的问题.解决的方法就是在页面加载后,执行如下语句: // 防止下拉菜单需要双击的bug $('.dro ...

  8. bootstrap下拉框的例子，提示Error: Bootstrap's JavaScript requires jQuery

    bootstrap很多js依赖jquery,所以需要引入jquery   遇到的问题: 页面访问提示:Error: Bootstrap's JavaScript requires jQuery   解 ...

  9. DataTables给每一列添加下拉框搜索

    $(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this ...

随机推荐

  1. Matrix Power Series POJ - 3233 矩阵幂次之和。

    矩阵幂次之和. 自己想着想着就想到了一个解法,但是还没提交,因为POJ崩了,做了一个FIB的前n项和,也是用了这个方法,AC了,相信是可以得. 提交了,是AC的 http://poj.org/prob ...

  2. Linux中vim编辑器的缩进的功能键

    vim编程时,经常需要对代码进行缩进处理,以增加程序的可读性和后期的代码维护. 可以采用多种方式达到缩进的目的: 1) 命令模式(command mode) 2) Visual模式(visual mo ...

  3. 【Unity3D】Tags和Layers

    Tags和Layers分别表示是Unity引擎里面的标签和层,他们都是用来对GameObject进行标识的属性,Tags常用于单个GameObject,Layers常用于一组的GameObject.添 ...

  4. python接口自动化（四十一）- 发xml格式参数的post请求（超详解）

    简介 最近在工作中,遇到一种奇葩的接口,它的参数数据是通过xml,进行传递的,不要大惊小怪的,林子大了什么鸟都有,每个人的思路想法不一样,开发的接口也是各式各样的,如果想要统一的话,必须是提前团队已经 ...

  5. SpringBoot | 番外：使用小技巧合集

    前言 最近工作比较忙,事情也比较多.加班回到家都十点多了,洗个澡就想睡觉了.所以为了不断更太多天,偷懒写个小技巧合集吧.之后有时间都会进行文章更新的.原创不易,码字不易,还希望大家多多支持!话不多说, ...

  6. MVVM技术 - 的实现 @{}来进行 调用那个 DataBinding方法

    new Material Design 支持哭 还有 Data Binding 结束   使用DataBindign 结束 我们很方面的实现 MVVM设计模式   什么是MVVM model 呢.   ...

  7. DockerSwarm 微服务部署

    一.简介 之前<服务Docker化>中,使用 docker-compose.yml 来一次配置启动多个容器,在 Swarm 集群中也可以使用 compose 文件 (docker-comp ...

  8. Magento 中一个订单的“生命历程”

    当我们在网上愉快的买买买的时候, 你知道在这些屏幕“背后”正在进行着什么吗? 1. 当一个产品被加入到购物车后, 实际上发生了什么? 当第一个产品被加入到购物车, 系统首先会生成一个 quote (q ...

  9. 执行命令npm install XXX后仍然提示 Cannot find Module XXX

    最近遇到一个问题,在服务器上配置完node环境后 执行npm start 命令后提示 Cannot find Module "Jquery" 然后就知道可能没有安装jquery 就 ...

  10. 玩转spring ehcache 缓存框架

    一.简介 Ehcache是一个用Java实现的使用简单,高速,实现线程安全的缓存管理类库,ehcache提供了用内存,磁盘文件存储,以及分布式存储方式等多种灵活的cache管理方案.同时ehcache ...