网页实例 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. ASP.NET(c#) 日期选择控件的另一种实现方法

    这篇文章是在一个英文网站发现的,完全使用ASP.NET实现了日期选择的基本功能,没有使用js,原文链接http://geekswithblogs.net/plundberg/archive/2009/ ...

  2. Hibernate查询视图返回null问题说明及解决办法

    在Hibernate中对含有主键的单表操作比较简单,直接使用Hibernate针对数据库表对象进行反向生成代码,直接调用就可以了.但是在实际项目当中,经常会用到不少的多表联合查询操作,网上有很多示例, ...

  3. Scrum立会报告+燃尽图（3）选题

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2193 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...

  4. 同时发出 ajax 拿到正确的返回值问题

    方案 大概意思就是前端在data里面 传一个标示给后台,  后台再ajax返回的时候携带这个标示

  5. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  6. Keep On Movin

    上回书说道不愿透露姓名的巨巨还剩下一个数组,这个数组记录了他学习c++ 语言的过程. 现在这个数组a里有一些字符,第i个字符的数量是a[i].巨巨想用这些字符来构造一些回文串好让他的程序通过编译. 他 ...

  7. 【C#】App_LocalResources实现多语言

    介绍 如果您创建的网页将由使用不同语言的用户阅读,则必须为这些读者提供用他们自己的语言查看网页的方法.一种方法是分别用各语言重新创建页面,但这种方法可能需要大量工作量.容易出错并且在更改原始页时很难维 ...

  8. LG3389 【模板】高斯消元法

    题意 题目描述 给定一个线性方程组,对其求解 输入输出格式 输入格式: 第一行,一个正整数\(n\) 第二至\(n+1\)行,每行\(n+1\)个整数,为\(a_1, a_2 \cdots a_n\) ...

  9. 浅谈 Gevent 与 Tornado（转）

    原文:http://www.pywave.com/2012/08/17/about-gevent-and-tornado/ 还是前几月的时候,几乎在同一时间,自己接触到了 Gevent 和 Torna ...

  10. 机器学习 ----Tensorflow

    机器学习笔记4-Tensorflow线性模型示例及TensorBoard的使用 机器学习笔记3-Tensorflow简介 机器学习笔记2 – sklearn之iris数据集 机器学习笔记1 - Hel ...