jsp 下拉列表选取触发function_Bootstrap下拉菜单样式

使用Bootstrap下拉插件用于显示切换你要展示的链接列表和更多内容的，或触发其它内容显示(覆盖）。

将下拉列表的切换（按钮或链接）和下拉菜单包含在.dropdown中，或者另外声明position: relative;元素;可以从<a>或<button>触发下拉菜单，以适应你的使用的需求。

单一按钮的下拉菜单

任何一个.btn块都可以定义变更为下拉菜单，下面是两个使用<button>元素做下拉菜单的示例。

<!-- 单一按钮的下拉菜单 -->
<div class="col-2">
	<div class="dropdown">
		<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</button>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-item">北京</a>
			<a href="#" class="dropdown-item">上海</a>
			<a href="#" class="dropdown-item">广州</a>
		</div>
	</div>
</div>

<!-- 使用a标签 -->
<div class="col-2">
	<div class="dropdown">
		<a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">a标签下拉</a>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-item">北京</a>
			<a href="#" class="dropdown-item">上海</a>
			<a href="#" class="dropdown-item">广州</a>
			<div class="dropdown-divider"></div>
			<a href="#" class="dropdown-item">深圳</a>
		</div>
	</div>
</div>

分离式按钮下拉菜单

同样，可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，注意添加了.dropdown-toggle-split-插入此符号为下拉选项作适当的间隔（距）处理。

<!-- 分离式按钮下拉菜单 -->
<div class="col-3">
	<div class="btn-group dropdown">
		<button class="btn btn-success btn-lg">分离式按钮下拉菜单</button>
		<button class="btn btn-success btn-lg dropdown-toggle dropdown-toggle-split"
			data-toggle="dropdown"></button>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-item">北京</a>
			<a href="#" class="dropdown-item">上海</a>
			<a href="#" class="dropdown-item">广州</a>
			<div class="dropdown-divider"></div>
			<a href="#" class="dropdown-item">深圳</a>
		</div>
	</div>
</div>