Bootstrap 下拉框搜索多选

Posted afterrains

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap 下拉框搜索多选相关的知识,希望对你有一定的参考价值。

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>jQuery bootstrap-select可搜索多选下拉列表插件-www.cankaojishu.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 下拉框搜索多选的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

bootstrap-select实现下拉框多选效果

Bootstrap select多选下拉框实现代码

bootstrap中selectpicker下拉框使用方法实例

bookstrap多选下拉框怎么样固定宽度

Bootstrap 多选下拉菜单,在 Rails 上带有搜索栏