可搜索多选下拉列表插件

最新推荐文章于 2024-05-15 00:21:36 发布

__铭

最新推荐文章于 2024-05-15 00:21:36 发布

阅读量1.6k

点赞数

分类专栏：数据库 JAVA基础知识文章标签： jquery 插件

本文链接：https://blog.csdn.net/code_kk/article/details/78637952

版权

JAVA基础知识同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

数据库

9 篇文章 0 订阅

订阅专栏

可搜索多选下拉列表插件

参考：http://blog.csdn.net/xb12369/article/details/50999265

<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'  
                'maximumSelectionLength' :1
            });  

            // $('.selectpicker').selectpicker('hide');  
        });  
    </script>  
</head>  
<body>  
    <label for="id_select">多选择下拉框(搜索)</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">单选择下拉（搜索）</label>  
                <div class="col-lg-10">  
                    <select id="bs3Select" class="selectpicker show-tick form-control"  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>

__铭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可搜索多选下拉列表插件

可搜索多选下拉列表插件参考：http://blog.csdn.net/xb12369/article/details/50999265<html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com</title> <script type="text/javascript" src=
复制链接

扫一扫

专栏目录