bootstrap下拉框

 先写html 

<div class="dropdown col-md-2 col-xs-6">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="dropdowntitle">请选择</span>
      <span class="caret"></span>
    </button>
    <input name="input" value="" type="hidden" />
    <ul class="dropdown-menu">
      <li><a val="s1" href="javascript:">1</a></li>
      <li><a val="s2" href="javascript:">2</a></li>
      <li><a val="s3" href="javascript:">3</a></li>
      <li><a val="s4" href="javascript:">4</a></li>
    </ul>
  </div>

再添加css样式来固定下拉框的宽度：

.dropdowntitle{
    width:5em;
    display: inline-block;
}

添加js来实现下拉列表点击事件 ：

$(".dropdown-menu").click(function(e){
    e=e||window.event;
    var obj=e.target||e.srcElement;
    var $thisclick=$(obj);//得到当前的点击元素
    if (!$thisclick.is("a")) return false;
    $(this).siblings("button.dropdown-toggle").children(".dropdowntitle").text($thisclick.text());//设置下拉框的显示文本
    $(this).siblings("input[type='hidden']").val($thisclick.attr("val"));//设置下拉框的值（赋在隐藏域中，由表单提交）
});

这里须要注意的是在ul上侦听列表项点击事件便可

设置默认值：

在须要设置默认值的项添加default="default"或其余自定义的属性

而后在页面加载完毕事件中添加：

$(".dropdown-menu").each(function(){
    $(this).find("a[default='default']").click();
});

使用each能够对每一个匹配的元素都执行这段代码，这样当页面上有多个下拉框时，默认项也能生效。