BootStrap下拉框搜索功能

<!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/

时间: 2024-10-20 03:55:11

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

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

由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2:引进到自己的java工程里面 3:在jsp页面进行引进来,在这里我们只需要三个文件就可以了 4:jsp 页面加载时直接调用 效果如下:

bootstrap下拉框的例子,提示Error: Bootstrap&#39;s JavaScript requires jQuery

bootstrap很多js依赖jquery,所以需要引入jquery 遇到的问题: 页面访问提示:Error: Bootstrap's JavaScript requires jQuery 解决方法: 在引入bootstrap的js文件之前,先引入jquery.js 导入顺序可以向下面一样 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><link rel

Bootstrap下拉框 Combobox

Bootstrap下拉框 Combobox显示效果如下: 源代码: <select class="combobox"> <option></option> <option value="PA">Pennsylvania</option> <option value="CT">Connecticut</option> <option value="N

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

当使用AngularJS和Bootstrap时,会发生菜单栏navbar控件 需要点击两下才能打开的问题.解决的方法就是在页面加载后,执行如下语句: // 防止下拉菜单需要双击的bug $('.dropdown-toggle').click(function(e) { e.preventDefault(); e.stopPropagation(); return false; }); Bootstrap:解决Bootstrap下拉框需要双击才能打开的问题

Android自学笔记之Spinner下拉框的功能、使用

Spinner: 是类似下拉列表的一种控件,用户从中选择相应选项! Spinner中的数据需要使用Adapter(适配器)填充. 使用: 布局文件activity_main.xml: <span style="font-family:KaiTi_GB2312;font-size:18px;"><Spinner android:id="@+id/spinner" android:layout_width="match_parent"

百度地图下拉框搜索建议,并自动添加标注点

HTML代码(MVC) @*-------------------调用地图接口在百度地图的基础上,添加自动搜索(地区)框----------------------------------*@ @{ Layout = null; } <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://a

bootstrap下拉框组件

这是我的第一个博客,请大家多多包涵,望指教!!! 要使用bootstrap的selectpicker下拉列表必须引入css和js: <!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css&quo

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

$(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this.api(); api.columns().indexes().flatten().each( function ( i ) { var column = api.column( i ); var select = $('<select><option value=""&

下拉框搜索条件

前台页面 : <div role="control" label="是否已经全部开票"> <input class="mini-combobox" id="isKaipiao" bind="isKaipiao" allowInput="false" data="[{text:'所有选择 ',id:''},{text:'已全部开票 ',id:'1'},{text