网页实例 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. FZU 2169 shadow spfa

    题目链接:shadow 好佩服自己耶~~~好厉害~~~ 麻麻再也不用担心我的spfa 和 邻接表技能了~~~ spfa 记录最短路径. #include <stdio.h> #includ ...

  2. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  3. 常用flash参数设置

    <object type="application/x-shockwave-flash" data="vcastr3.swf" width="6 ...

  4. Android 遍历全国的地区二(获取天气)

    根据上次的内容 1. 界面布局 weather_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/a ...

  5. Beta阶段第2周/共2周 Scrum立会报告+燃尽图 08

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2389] 版本控制:https://git.coding.net/liuyy08 ...

  6. vim自动缩进

    最近写完程序,在进行调试时发现特别困难,代码乱的一塌糊涂,特别是代码量很多时,调试起来特别囧,逻辑很难理清. 这让我想起了缩进功能,可以让代码自动对齐. gedit编辑器在菜单栏里的编辑->首选 ...

  7. ECUST 12级 Practise

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26399#overview 果断开小号水过 CodeForces 58A #include ...

  8. 【传输协议】https SSL主流数字证书都有哪些格式？

    一般来说,主流的Web服务软件,通常都基于两种基础密码库:OpenSSL和Java. Tomcat.Weblogic.JBoss等,使用Java提供的密码库.通过Java的Keytool工具,生成Ja ...

  9. QLoo graphql engine 学习三 架构

    一张官方的参考图 说明 Storage Layer API 参考了kubernetes 的设计 qloo 组成 qloo 有qloo 服务以及envoy proxy 组合而成,envoy proxy ...

  10. hasura graphql schema 导出

    使用的是apollo 的插件 安装apollo npm install -g apollo 基本使用 因为我使用了模式拼接,所以地址有变动,一般是 http://host:port/v1alpha1/ ...