插件bootstrap-select官网 : https://developer.snapappointments.com/bootstrap-select/

bootstrap-select插件: 下拉框查询搜索 示例demo

html文件：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8"/>

         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

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

     </head>

     <body>

         <!--<select id="slpk" class="selectpicker"  multiple  title="提示语"  data-max-options="5" data-live-search="true" ></select>-->

         <form  action="demo.php" method="get">

             <div class="form-group">

                 <label class="col-sm-1 control-label">生肖:</label>

                 <div class="col-sm-3">

                     <select id="usertype" name="zodiac[]" class="selectpicker form-control" multiple title="请选择" data-max-options="5" data-live-search="true" data-size="8">

                         <option value="0">全部</option>

                         <option value="1" data-content="<span class='label label-primary'>鼠</span>"></option>

                         <option value="2">牛</option>

                         <option value="3" data-content="<span class='label label-success'>虎</span>"></option>

                         <option value="4">兔</option>

                         <option value="5" data-content="<span class='label label-info'>龙</span>"></option>

                         <option value="6">蛇</option>

                         <option value="7" data-content="<span class='label label-warning'>马</span>"></option>

                         <option value="8">羊</option>

                         <option value="9" data-content="<span class='label label-danger'>鸡</span>"></option>

                         <option value="10">猴</option>

                         <option value="11" data-content="<span class='label label-primary'>狗</span>"></option>

                         <option value="12">猪</option>

                     </select>

                 </div>

             </div>

             <button type="submit" class="btn btn-default">提交按钮</button>

         </form>

     </body>

     <script src="js/jquery.min.js" type="text/javascript"></script>

     <script src="js/bootstrap.min.js" type="text/javascript"></script>

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

     <script type="text/javascript">

         $(function() {

             $(".selectpicker").selectpicker('val', '0');

         });

      </script>

 </html>

php文件:

 <?php

 $data = $_GET;

 var_dump($data);

运行效果图如下：

 示例代码demo文件下载地址 ： 点击下载

bootstrap插件bootstrap-select使用demo的更多相关文章

  1. Thymeleaf使用bootstrap及其bootstrap相关插件（一）

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 在完成信息录入界面 ...

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

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

  3. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  4. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  5. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  6. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  7. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

  8. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

  9. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  10. BootStrap插件

    站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...

随机推荐

  1. [Web 前端] 024 js 的定时器及函数

    1. Javascript 定时器 1.1 计时事件 设定一个间隔,时间到了后准时执行代码,此为"计时事件" 1.2 作用 1.制作动画 2.异步操作 1.3 定时器的类型及语法 ...

  2. 数据库设计时，每个表要不要都设置自增主键ID！（转）

    逻辑数据库设计 - 需要ID(谈主键Id) 本文的目标就是要确认那些使用了主键,却混淆了主键的本质而造成的一种反模式. 一.确立主键规范 每个了解数据库设计的人都知道,主键对于一张表来说是一个很重要, ...

  3. 思维体操： HDU1022Train Problem I

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. 异步Promise及Async/Await可能最完整入门攻略

    此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...

  5. PY 个板子计划【雾

    各类板子计划 A+B √ 放个鬼的链接[雾 欧拉筛 √ https://www.cnblogs.com/Judge/p/11690114.html 树状数组 √ 惨痛的教训,以后咱打数据结构的时候绝对 ...

  6. java代码转化为jar包，再转化为.exe文件步骤

    下面是具体步骤: 一.先把自己的程序发布成jar文件 这是eclipse自带的功能,右键工程包-->Export 然后选择Java-->JAR file,next 选择输出路径,next ...

  7. 使用英特尔® 驱动程序和支持助理更新英特尔®固态盘数据中心工具（英特尔®固态盘 DCT）后仍旧提示更新

    再regedit中搜索原始版本,位于计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\{82F015 ...

  8. Django验证码实现

    1.点击验证码更换新的验证码 2.验证码必须是图片形式的 3.验证码实现的流程 服务端: a. session中保存随机验证码,如:87fs b.把验证码写到一个白板里面制作成图片 c. 在页面中显示 ...

  9. IIC通信协议详解

    IIC通信详解 IIC概述 IIC:两线式串行总线,它是由数据线SDA和时钟线SCL构成的串行总线,可发送和接收数据. 在CPU与被控IC之间.IC与IC之间进行双向传送,高速IIC总线一般可达400 ...

  10. 基于Nginx+nginx-rtmp-module+ffmpeg搭建rtmp、hls流媒体服务器（二）

    前言 Nginx-rtmp-module插件针对RTMP协议中一些命令,实现了事件通知和exec外部脚本处理.这里我通过一个简单的SpringBoot项目和Python代码,快速搭建一个HTTP服务来 ...