<!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. 经典PHP笔试题

    1.考虑如下脚本.标记处应该添加什么代码才能让脚本输出字符串php? $alpha = 'abcdefghijklmnopqrstuvwxyz'; $letters = array(15, 7, 15 ...

  2. postgresql安装,java简单使用postgresql

    一 整合 由于本人的学过的技术太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的github项目地址 https://github.com/247292980/spri ...

  3. eclipse配置android开发环境并搭建第一个helloWord工程

    一.搭建Android在eclipse下环境    一.JDK(不用安装  下载地址: http://www.xp510.com/xiazai/Application/program/23625.ht ...

  4. over partition by与group by

    over partition by与group by 的区别 http://www.cnblogs.com/scottpei/archive/2012/02/16/2353718.html 今天看到一 ...

  5. js和JQuery中offset等属性对比

    HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...

  6. [Java][Liferay] 解决Liferay ext项目deploy的问题

    Liferay ext project在install war包之后需要重启服务器,重启服务器中会执行ExtHotDeployListener中的逻辑,这里有一个坑,如果是第二次以后install e ...

  7. hibernate课程 初探单表映射1-11 通过hibernate API访问编写第一个小例子

    hibernate 业务流程 1 创建配置对象 Configuration config  = new  Configuration().configure(); 2 创建服务注册对象 Service ...

  8. Servlet高级部分Filter(过滤器)

    一:Filter称之为"过滤器",用在Servlet外,对request和response进行修改.它是AOP(面向切面编程思想的一种体现),Filter中有一个FilterCha ...

  9. 会话跟踪之Cookie

    一:简介 Cookie主要用来存储用户信息,追踪用户会话.web客户端访问服务端直接采用的协议是Http,Http协议是一种无状态协议,无状态表现在不能够保留用户访问状态,无法记录用户信息.每一次的请 ...

  10. WIn10 电脑运行Docker

    参考地址: https://www.cnblogs.com/linjj/p/5606687.html https://docs.docker.com/engine/reference/commandl ...