bootstrap实现输入框组带可选择的下拉框

原本的代码可见菜鸟教程
https://www.runoob.com/bootstrap/bootstrap-input-groups.html

bootstrap示例可以实现输入框组和带有下拉菜单的按钮

    <div class="input-group">
		<input type="text" class="form-control">
		<div class="input-group-btn">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				下拉菜单 
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu pull-right">
				<li><a href="#">功能</a></li>
				<li><a href="#">另一个功能</a></li>
				<li><a href="#">其他</a></li>
				<li class="divider"></li>
				<li><a href="#">分离的链接</a></li>
			</ul>
		</div><!-- /btn-group -->
	</div><!-- /input-group -->

如下图所示，但是点击下拉却不能选择下拉菜单中某个选项，这样不是很好，因为有时候需要选择下拉框的选项，比如选择邮箱后缀。

所以可以

 <div class="input-group">
     <input type="text" id="mailuername" class="form-control" placeholder="Mail">
     <div class="input-group-btn">
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                 style="background-color: white">
             <!-- 默认内容 -->
             <span id="mailsuffix" class="buttonText">@qq.com</span>
             <span class="caret"></span>
         </button>
         <!-- 下拉框选择的内容 -->
         <ul class="dropdown-menu pull-right">
             <li><a href="#" onclick="shows($(this).text())">@qq.com</a></li>
             <li><a href="#" onclick="shows($(this).text())">@163.com</a></li>
         </ul>
     </div><!-- /btn-group -->
 </div><!-- /input-group -->

定义一个show()函数，点击下拉框的时候将（class=buttonText）的span内容设为所选的下拉框里的内容

<script>
 //用来改变后缀邮箱
 function shows(a) {
     $('.buttonText').text(a)
 }
</script>

这样便可以进行下拉框的内容选择了