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>