精华内容
下载资源
问答
  • bootstrap下拉框 搜索

    2018-03-28 16:47:04
    <div class="form-group"> <label class="col-sm-3 control-label">负责人:</label> <div class="col...
                                <div class="form-group">
    		                            <label class="col-sm-3 control-label">负责人:</label>
    		                            <div class="col-sm-8">
    		                                <select data-placeholder="--选择负责人--" name="carOwner" id="type"
    		                                        class="form-control chosen-select" tabindex="2" required>
    		                                    <option value="">--选择负责人--</option>
    		                                </select>
    		                            </div>
                            	</div>

    展开全文
  • Bootstrap 下拉框搜索多选

    千次阅读 2017-06-08 23:12:10
    jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com <!-- 2.3.2
        <!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>  

    展开全文
  • <!DOCTYPE html> <html> <head>...jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com</title> <script type="text/javascript" src="htt...
    <!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/

    转载于:https://www.cnblogs.com/duanyue/p/7211854.html

    展开全文
  • Bootstrap 下拉框搜索组件

    千次阅读 2019-04-18 15:14:51
    Bootstrap 下拉框搜索组件 html代码 data-live-search=“true” 属性必加 <div class="row form-group"> <div class="col-lg-2"></div> <div class="form-group col-lg-8" > <label...

    Bootstrap 下拉框带搜索组件

    html代码
    data-live-search=“true” 属性必加

    <div class="row form-group">
        <div class="col-lg-2"></div>
        <div class="form-group col-lg-8" >
            <label class="input-group">
                <span class="input-group-addon">用户名称:</span>
                <select class="col-lg-6 form-control"  id="userName" name="name"
                        data-live-search="true">
                </select>
            </label>
        </div>
    </div>
    

    js代码

     $(function () {
     		//初始化select
            $("#userName").selectpicker({
                'selectedText': 'cat'
            });
        })
    

    查询出所有用户绑定到select下的option

        $.ajax({
            url:'/system/user/listUser.json',
            type:'get',
            dataType:'json',
            success:function(d){
                if(d.state=="success"){
                    var html ="";
                    $.each(d.date,function (i,v) {
                        html+='<option value='+v.id+'>'+v.chineseName+'</option>'
                    })
                    $("#smsUserForm [name=name]").html(html);
                    //重新加载一遍select
                    $("#smsUserForm [name=name]").selectpicker('refresh');
                    
                }
            }
        })
    

    运行效果:

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能,多选功能,搜索功能,自定义内容和图标等多种功能,非常强大。
  • Bootstrap下拉框搜索

    千次阅读 2018-02-28 17:30:51
    <link rel="stylesheet" href="bootstrap-select.min.css"> <link rel="stylesheet" href="bootstrap.min.css"> <script type="text/javascript" src="jquery.min.js"></script> ...
  • //多选multiple 搜索data-live-search="true" 单选的话去掉multiple <select id="channel_idselect" name="channel_idselect" class="form-control selectpicker" title="全部平台" mult...
  • 下拉框有时会被页面挡住。这边老员工说是网络问题
  • BootStrap下拉框,添加模糊搜索

    千次阅读 2017-10-31 16:25:10
    < label class= "col-sm-1 control-label" ...另外还需要引入bootstrap的几个包如下: ......这样就完成了,支持模糊搜索,有什么疑问,留言答复,也研究了很久,效果图如下 :  
  • 由于项目中下拉项内容太多,所以需要用到搜索功能,因此用bootstrap的下拉可以完美实现第一项首先我需要从后台取到下拉的内容添加到select中封装添加option的函数function addOptions(container,list,value,desc) {...
  • 今天小编就为大家分享一篇使用bootstrap实现下拉框搜索功能的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 对于词的研究,想必每个seoer都知道,而除了比较热门的百度相关搜索词之外,百度下拉框关键词应该也是不少人研究的范围,不过大部分人都是针对下拉框词的刷量,毕竟百度下拉框关键词采集已经泛滥成灾了。百度下拉的...
  • bootstrap搜索下拉框bootstrap-select

    万次阅读 2018-02-05 10:52:26
    实现bootstrap搜索下拉框,本文采用bootstrap-select插件;bootstrap-select插件依赖jquery1.8+和bootstrap, 所以需要先引入jquery和bootstrap。 代码: bootstrap 搜索下拉框 ...
  • 原文名叫:「SE0实战技巧」搜索引擎优化关键词如何选择?目录:这个是小诸葛说网络营销的第12篇原创了,为什么想写这个主题呢?一是我最近在走访很多企业辅导时,发现他们对搜索引擎免费推广要选择的关键词真的是...
  • 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js 不区分大小写,模糊匹配,哈哈,太棒了~~ 具体用法: [removed]...
  • 使用bootstrap实现下拉框搜索功能

    万次阅读 2016-12-12 20:57:33
    背景公司的小二后台有一个下拉框选择经销商的功能,由于选择的经销商过多,因此添加搜索功能。前提配置好Bootstrap相关的开发环境主要内容 经销商信息 <select n
  • 由于项目中下拉项内容太多,所以需要用到搜索功能,因此用bootstrap的下拉可以完美实现 <div class="field-group"> <select class="form-control" id="sel_pcType" data-live-search="true"> ...
  • 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js 不区分大小写,模糊匹配,哈哈,太棒了~~ 具体用法: ...
  • 但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js不...
  • JQ JS javascript bootstrap搜索 下拉框 select
  • bootstrap select下拉框模糊搜索和动态绑定数据解决方法
  • data-rule-reconciliationDate="[/^((0?[1-9])|((1)[0-9])|((2)[0-7]))$/,'请输入2到27的之间的正整数']">请选择对账日期23456789101112131415161718192021222324252627console.info($("#id_hide").selectpicker...
  • 通过 bootstrap-select 插件,该实例中除了自带的demo实例外还加上了自己添加的通过拼音搜索汉字实例
  • bootstrap4c-chosen是一款Bootstrap4下拉框功能强化插件。该插件在原生bootstrap4下拉框的基础上,新增了搜索、选项分组、多选等功能,非常实用。
  • Bootstrap选择下拉框搜索功能

    千次阅读 2017-10-20 16:10:43
    data-live-search = true

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 192
精华内容 76
关键字:

bootstrap下拉框搜索