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能夠對每一個匹配的元素都執行這段代碼，這樣當頁面上有多個下拉框時，默認項也能生效。