<!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. powerdesigner添加唯一约束

    假设我们有一个user表,字段为ID和NAME,现在ID作为逻辑主键,自增,想将NAME添加唯一约束,话不多说直接上图: # 添加一个key, 名字随便取,我取为key_u # 双击添加的key的第一 ...

  2. (转)用户管理 之 Linux 用户（user）和用户组（group）管理概述

    用户管理 之 Linux 用户(user)和用户组(group)管理概述  原文:http://www.cnblogs.com/licheng/p/6103992.html 一.理解Linux的单用户 ...

  3. Jenkins~通过WebDeploy实现自动部署

    Jenkins以之前的文章中已经有所介绍,主要集成了自动化部署的功能,而对于自动化部署来说是由多个组件组成的,每个组件负责自己的事,如今天说的webDeploy,它主要实现将网站文件动态发布到另一台I ...

  4. Nodejs mysql pool使用实例

    前段时间在写一个版本发布工具,用到express+mysql实现,当站点运行很长一段空白时间后,node进程会自动down掉,提示mysql连接错误,谷歌后发现是mysql自身的特性导致,因此后来改为 ...

  5. Handler: Service中使用Toast

    Handler 的使用在 android App 开发中用的颇多,它的作用也很大,使用 Handler 一般也会使用到多线程,相信大家对 Handler 不会陌生,在这里,重点说一下 android ...

  6. python随笔---录入月份的值，输出对应的季节

    首先获取一个输入,加判断,输入对应的月份,季节判定根据气象划分法(气象划分法:在气象部门,通常以阳历3-5月为春季,6-8月为夏季,9-11月为秋季,12月-来年2月为冬季,并且常常把1.4.7.10 ...

  7. 《Unity預計算即時GI》笔记：二、光照图

    说明 这篇文章是对<Unity預計算即時GI>这个系列文章的笔记. 光照图 什么是光照图 光照图在第三章中有如下的定义,读起来很是费解. 一個光照圖(Chart)是表示一個光照貼圖的區域, ...

  8. Mybatis-Spring整合Spring

    因为 MyBatis 用 SqlSessionFactory 来创建 SqlSession ,SqlSessionFactoryBuilder 创建 SqlSessionFactory ,而在 Myb ...

  9. meterpreter > migrate 1548

    1548  1500  explorer.exe      x86   0           LIXIULI-VCS86VR\test      C:\WINDOWS\Explorer.EXE 19 ...

  10. COGS 11. 运输问题1

    ★★☆   输入文件:maxflowa.in   输出文件:maxflowa.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]     一个工厂每天生产若干商品,需运输到 ...