bootstrap插件bootstrap-select使用demo
插件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的更多相关文章
- Thymeleaf使用bootstrap及其bootstrap相关插件(一)
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 在完成信息录入界面 ...
- js插件---Bootstrap 树控件
js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- BootStrap插件
站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...
随机推荐
- STM32 晶振 系统时钟8MHZ和72Mhz的原因
首先问题描述: 1.自己画的板子和淘宝买的最小系统板 系统时钟不一致,自己画的是8Mhz,HSE失败:最小系统板72Mhz 2.最小系统板在程序1运行仿真的时候,查看peripherals->P ...
- 使用foreach一次性添加多个单选按钮
<?php //这个函数创建一个单选按钮 //函数接收一个论据:值 //函数也会让按钮有"黏性"-->记住你是如何填写它的. function create_radio ...
- centos7yum安装VirtualBox
cd 进入目录:/etc/yum.repos.d 新建一个文件virtualbox.repo, 输入如下内容: [virtualbox] name=Oracle Linux / RHEL / Cent ...
- AXI总线协议
AXI总线协议 (一).概述 AXI (高性能扩展总线接口,Advanced eXtensible Interface)是ARM AMBA 单片机总线系列中的一个协议,是计划用于高性能.高主频的系统设 ...
- Tabcontrol动态添加TabPage(获取或设置当前选项卡及其属性)
http://blog.csdn.net/xiongxyt2/article/details/6920575 •MultiLine 属性用true 或false来确定是否可以多行显示 •Appeara ...
- #define 宏实现函数功能可能存在的问题
#define 宏实现函数功能的问题 情形1 #define free_ptr(p) \ if(p) delete p; p = nullptr; 在调用free_ptr(p)的地方展开看这段代码: ...
- (ES6)数据处理常用工具方法收集(更新状态: on)
1. 扁平数组转成tree结构(来源: StackOverflow的印度老哥写的) // Data Set // One top level comment var comments = [{ id: ...
- python数字图像处理(二)关键镜头检测
镜头边界检测技术简述 介绍 作为视频最基本的单元帧(Frame),它的本质其实就是图片,一系列帧通过某种顺序组成在一起就构成了视频.镜头边界是视频相邻两帧出现了某种意义的变化,即镜头边界反映了视频内容 ...
- 瞎JB逆
P为质 ; long long quickpow(long long a, long long b) { ) ; ; a %= mod; while(b) { ) ret = (ret * a) % ...
- ubuntu安装软件失败
Unable to fetch some archives, maybe run apt-get update or try with --fix-missing sudo gedit /etc/ho ...