网页实例 http://www.jq22.com/yanshi302

使用bootstrap-select插件来实现下来菜单搜索匹配功能，如图

实现代码如下

<html>

    <head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/bootstrap-select.min.css">

    <script src="jquery-3.1.0.min.js"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <script src="js/bootstrap-select.min.js"></script>

    </head>

    <body>

    <form class="form-inline">

    <div class="form-group">

      <label class="col-md-1 control-label" for="lunch">Lunch:</label>

    </div>

    <div class="form-group">

      <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">

        <option>Hot Dog, Fries and a Soda</option>

        <option>Burger, Shake and a Smile</option>

        <option>Sugar, Spice and all things nice</option>

         <option>中国</option>

        <option>美国</option>

        <option>日本</option>

        <option>Baby Back Ribs</option>

        <option>A really really long option made to illustrate an issue with the live search in an inline form</option>

      </select>

    </div>

  </form>

    </body>

</html>

步骤：

1.导入相关的js和css文件，可自行下载

bootstrap-select：http://silviomoreto.github.io/bootstrap-select/

bootstrap:http://v3.bootcss.com/

JQuery:http://jquery.com/

2.设置<select></select>的属性

class="selectpicker" data-live-search="true"

下拉列表插件bootstrap-select使用实例的更多相关文章

  1. Select-or-Die：灵活的 jQuery 下拉列表插件

    Select-or-Die 是一个 jQuery 插件,用来自定义下拉列表(Select)元素.原生的下拉选择元素在各个浏览器的默认样式差异很多,而且自定义样式很困难,因此 Web 开发人员喜欢使用插 ...

  2. Bootstrap-风格的下拉按框：Bootstrap Select

    Bootstrap Select 是一个jQuery插件,提供了Bootstrap 风格的下拉选择框.拥有许多自定义的选项,可多选. 效果图: 源代码: <select class=" ...

  3. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  4. bootstrap select 多选的用法，取值和赋值（取消默认选择第一个的对勾）

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  5. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  6. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  7. jq bootstrap select 点击不能动弹

    jq  bootstrap select 点击不能动弹   因为是样式selectpicker  冲突. 解决办法换 样式  form-control <select name="ty ...

  8. Bootstrap select多选下拉框实现代码

    前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没 ...

  9. 【特别推荐】几款极好的 JavaScript 下拉列表插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

随机推荐

  1. Java的变量相关

    变量是在一个范围内的可变的值. 要点: 数据类型(确定变量的值的类型) 一个字节里面8个位,每个位里存储0101这样的二进制的补码表示用来数据,一个字节的数据类型的第一个位是符号位,表示正负. 数据类 ...

  2. CS231n课程笔记翻译4：最优化笔记

    译者注:本文智能单元首发,译自斯坦福CS231n课程笔记Optimization Note,课程教师Andrej Karpathy授权翻译.本篇教程由杜客翻译完成,堃堃和李艺颖进行校对修改.译文含公式 ...

  3. secureCRT连不上虚拟机上的ubuntu

    前些日子我的secureCRT一直连不上虚拟机上的ubuntu,虽然两边的IP都能ping通! 都怪我当初连ssh都没装就在那瞎弄,执行以下第二步即可连接上了. 如何使用SecureCRT连接ubun ...

  4. .NET 命令行参数包含应用程序路径吗？

    如果你关注过命令行参数,也许发现有时你会在命令行参数的第一个参数中中看到应用程序的路径,有时又不会.那么什么情况下有路径呢? 其实是否有路径只是取决于获取命令行参数的时候用的是什么方法.而这是 Win ...

  5. Convex 一道阿姆斯特朗回旋好题

    2001年5月8日,阿姆斯特朗(Armstrong, 1929-2013) 教授发明了一种名为“阿姆斯特朗回旋加速喷气式阿姆斯特朗加密”的加密算法,算法从未公开,直至2013阿姆斯特朗教授逝世后,其生 ...

  6. MacOS 如何截屏

    在Mac OS X下有很强大的截屏功能,它不仅仅是对屏幕的全屏COPY,而是包括很多细节在里面,就从这点来看,已经比过所有版本的Windows了. 下面我来向大家详细介绍一下: 对全屏的截图我们可以通 ...

  7. ②Jenkins集成—集成构建部署

    之前的博文介绍了Jenkins的入门安装,本文主要介绍如何使用jenkins进行git项目的集成构建与部署 1.首先进行全局工具配置 查看下本机的jdk.maven.git安装路径 echo $PAT ...

  8. PCB 设计文件中哪些可以不做成元件

    PCB 文件中哪些可以不做成元件 在 PCB 设计时有些元件为了快速,实际并不需要做成元件. 因为做成元件会浪费时间,并且生产时也没有实际的元件. 如下(持续更新): PCB 与 PCB 之前的连接人 ...

  9. Spark和YARN

    Spark在master node生成DAG之后,将DAG以及map函数,action函数进行打包,还有一个很重的打包内容:如何在worker节点执行.统统打包之后传递给YARN,YARN本身只是负责 ...

  10. Cacti不出图

    http://os.51cto.com/art/201404/434915.htmhttp://os.51cto.com/art/201109/289306.htmhttp://freeloda.bl ...