Bootstrap完美select标签下拉菜单实现

草巾冒小子

已于 2025-03-31 22:14:08 修改

阅读量10w+

点赞数 17

分类专栏： bootstrap bootstrap踩坑篇文章标签： bootstrap javascript 前端

于 2018-08-25 14:00:01 首次发布

本文为优快云博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.youkuaiyun.com/qq_35393869/article/details/82021585

版权

博客主要介绍了Bootstrap下拉菜单的实现。初级者对官方下拉菜单组件兴趣不大，因此提供了简单原生下拉标签下拉组件。展示了样式1和样式2的截图对比，给出主要代码及全部html代码，还提及参考实现效果及子页面下拉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap `<select>` 下拉菜单实现

初级者使用bootstrap框架时，大部分对官方提供的下拉菜单dropdown组件不是很感冒！
所以，这里就提供简单原生下拉标签<select><option>实现的下拉组件。

`一、` 样式1、样式2——截图对比

`1.` 原生`select标签`，截图如下：

原生select标签效果

`2.` bootstrap官方`dropdown组件`，截图如下：

官方dropdown效果

`二、`样式1、样式2 —— 主要代码

<div class="form-group">
    <label for="email" class="col-sm-2 control-label">所属角色</label>	
    <div class="col-sm-6">	
    	<!-- 样式1 -->
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
    	<!-- 样式2 -->
		<!--<div class="btn-group dropdown" id="dropdown">
		  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    超级管理员 <span class="caret"></span>
		  </button>
		  <input type="hidden" name="hidedrop_1" id="hidedrop_1" value="超级管理员" />
		  <ul class="dropdown-menu">
		    <li><a href="#">超级管理员</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">设计总监</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">运维人员</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">发布人员</a></li>
		  </ul>
		</div>-->
		
    </div>
    <div class="col-sm-4 tips"></div>
</div>

附：全部html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加管理员</title>
	<link rel="stylesheet" type="text/css"

最低0.47元/天解锁文章

Bootstrap完美select标签下拉菜单实现

Bootstrap <select> 下拉菜单实现

一、 样式1、样式2——截图对比

1. 原生select标签，截图如下：

2. bootstrap官方dropdown组件，截图如下：

二、样式1、样式2 —— 主要代码