Bootstrap select(选择列表)
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项，则使用选择框
1、使用<select>展示列表选项
2、使用multiple="multiple"允许用户选择多个选项
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：Select选择框</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form role="form">
<div class="form-group">
<label>单选择列表</label>
<select class="form-control">
<optgroup label="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Pear</option>
<option>Grade</option>
<option>Leman</option>
<option>Magao</option>
</optgroup>
<optgroup label="cars">
<option>路虎</option>
<option>奔驰</option>
<option>宝马</option>
<option>大众</option>
<option>起亚</option>
<option>现代</option>
</optgroup>
</select>
<br />
<label>多选择列表</label>
<select class="form-control" multiple="multiple">
<optgroup label="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Pear</option>
<option>Grade</option>
<option>Leman</option>
<option>Magao</option>
</optgroup>
<optgroup label="cars">
<option>路虎</option>
<option>奔驰</option>
<option>宝马</option>
<option>大众</option>
<option>起亚</option>
<option>现代</option>
</optgroup>
</select>
</div>
</form>
</div>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap select(选择列表)的更多相关文章
- select 选择列表传值问题
<select> <option value ="volvo">Volvo</option> <option value ="s ...
- 【MySQL作业】SELECT 数据查询——美和易思select 选择列表应用习题
点击打开所使用到的数据库>>> 1.查询所有客户的地址和电话号码. SELECT address, phone FROM customer 2.查询所有商品的名称.种类和单价信息. ...
- 选择列表中的列无效，因为该列没有包含在聚合函数或 GROUP BY 子句中
选择列表中的列无效,因为该列没有包含在聚合函数或 GROUP BY 子句中 T-SQL核心语句形式: SELECT --指定要选择的列或行及其限定 [INTO ] --INTO子句 ...
- bootstrap select 多选的用法，取值和赋值（取消默认选择第一个的对勾）
h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 首先引入bootstrap和bootstrap-select的c ...
- 当没有用 EXISTS 引入子查询时，在选择列表中只能指定一个表达式。
当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式.比如 select * from T_Employee where FNumber not in ( select top 5* ...
- 类似 select 选择框效果及美化
网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...
- Bootstrap-风格的下拉按框：Bootstrap Select
Bootstrap Select 是一个jQuery插件,提供了Bootstrap 风格的下拉选择框.拥有许多自定义的选项,可多选. 效果图: 源代码: <select class=" ...
- 智能文件选择列表—— bat 批处理
智能文件选择列表 *.wim @echo off setlocal enabledelayedexpansion title 智能文件选择列表 pushd %~dp0 & cd /d %~dp ...
- 在选择列表中无效，因为该列既不包含在聚合函数中，也不包含在 GROUP BY 子句
在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句 突然看到这个问题,脑袋一蒙,不知道啥意思,后来想想,试图把select里的选项放到后面,问题自然解决! 下面这 ...
随机推荐
- Dota2技能系统设计分析
http://blog.csdn.net/langresser_king/article/details/46776701 前两周写完了新游戏的技能系统.虽然也算灵活,但是跟Dota2的技能系统设计比 ...
- IDEA安装actiBPM插件，亲测成功！避免直接在线安装或下载jar包硬盘都会报错问题！
在安装actiBPM之前先对IEDA进行如下设置: 开始安装网上的教程直接IDEA安装actiBPM,能安装成功,但无法打开新建bpmn文件.多次重新安装重启还是不行,苦苦弄了几个小时,最后才找到下面 ...
- 在接口的实现类里使用@Override注解报错
问题分析 @Override注解用来检测子类对父类或接口的方法的重写是否正确,但有一次我在Eclipse里对接口的实现类里使用@Override注解却报错,不过在父类的子类里使用该注解却是正常的. 百 ...
- 关于js对象参数的讨论 用街道类比
var obj = { p: 1 }; function f(o) { o.p = 2; } f(obj); obj.p 上面代码中,传入函数f的是参数对象obj的地址.因此,在函数内部修改obj的属 ...
- [题解]（堆）luogu_P1631序列合并
思路来自题解 作者: Red_w1nE 更新时间: 2016-11-13 20:46 在Ta的博客查看 72 最近有点忙 没时间贴代码了== [分析] 首先,把A和B两个序列分别从小到大排序,变成两 ...
- html Css PC 移动端 公用部分样式代码整理
css常用公用部分样式代码整理: body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li ...
- Django quick tutorial
--第一部分,快速开始-- 01. Django简介
- Codeforces Round #547 (Div. 3) D. Colored Boots
链接:https://codeforces.com/contest/1141/problem/D 题意: 给连个n长度的字符串. 求两个字符串相同字符对应位置的对数,并挨个打印. 字符:?可以代替任何 ...
- AKOJ-2010-魔法石
链接:https://oj.ahstu.cc/JudgeOnline/problem.php?id=2010 题意: Vyoung最近收集到一大批魔法石,这些魔法石有两种特性,攻击和防守,不同特性的两 ...
- linux进行文件vim编辑时没有退出文件直接关闭出现E325: ATTENTION Found a swap file by the name "/usr/local/php/etc/.php.ini.swp"
E325: ATTENTIONFound a swap file by the name "/usr/local/php/etc/.php.ini.swp" ow ...