Bootstrap是當下流行的前端UI組件庫之一。利用Bootstrap，可以很方便的構造美觀、統一的頁面。把設計師從具體的UI編碼中解放出來。
Bootstrap提供了不少的前端UI組件。帶下拉菜單的文本框就是其中之一，效果圖如下（真要自己完全設計，還得費一番功夫）
關於該組件的詳情參看Bootstrap官網、帶下拉菜單的文本框
看到上面的效果圖，使我想到WinForm編程中的DropDownList控件。不過，和DropDownList控件相比，還缺少以下內容
1、當點擊菜單中的某一項，菜單的文字自動顯示在文本框中
2、當點擊菜單中的某一項，提供一個函數來獲得相關的數據（可以是菜單的文字，也可以是相關的文本）
3、文本框不能編輯，只能通過點擊菜單來更改內容
4、能設置下拉菜單的最大高度，使得菜單項過多時，能出現滾動條。（想想看，30條目將會占滿整個屏幕是多麼恐怖的事）
當然，Bootstrap只提供了前端UI的外觀，上面的這幾條都可以通過編碼來完成
基於碼農的精神，自力更生，自己寫一個DropDownList的JQuery組件。
先規劃好這個JQuery組件的屬性：
InputName：文本框的name和id屬性，默認值是“Q”；
ButtonText：右側按鈕的文字，默認值是“示例”；
ReadOnly：文本框的可編輯性屬性。默認是true，也就是不能編輯，只能通過點擊菜單來改變文字；
MaxHeight：下拉菜單的最高高度。默認值是-1，不設置最高高度，菜單的高度由菜單的條目決定；
onSelect：設置選擇菜單條目時調用的函數。默認值是$.noop()，JQuery中的空函數；
Items：菜單條目的集合。每個菜單項提供ItemText屬性（菜單文字）、ItemData屬性（相關數據）、Selected屬性（默認選擇項，有多個，算最後一個）
Sections：菜單組的幾何。每個組包含ItemHeader屬性（組標題文字）、Items屬性（該組菜單條目的集合）。每個組之間有一條分割線。該屬性的優先級高於Items屬性（如果僅僅設置了Items，則意味著只有一個菜單組，沒有分割線，沒有組標題文字）。
DropDownList的組件代碼如下，由於是基於JQuery，故要把該代碼置於JQuery引用代碼之下：
代碼比較簡單，主要就是依據屬性值來拼接HTML代碼，下面簡單的說明一下：
ReadOnly的實現：由於不是通過設置文本框的ReadOnly屬性（會改變文本框的外觀），因此采用綁定屏蔽掉文本框的cut、copy、paste、keydown事件來實現。
MaxHeight的實現：判斷下拉菜單（元素UL）的高度是否超過MaxHeight，若超過則設置CSS屬性Height和Overflow
onSelect函數：要自己實現一個函數，參數有兩個值，第一個值是文本框的名字，第二個是當前點中的菜單項的相關數據（ItemData屬性）
<script>
(function($){
jQuery.fn.DropDownList = function(options) {
//設置插件的默認屬性
var defaults ={
InputName:"Q",
ButtonText:"示例",
ReadOnly:true,
MaxHeight:-1,
onSelect:$.noop(),
}
var options = $.extend(defaults,options);
return this.each(function(){
var o=options;
var Obj=$(this);
var S="<div class='input-group'>";
S = S + "<input type='text' class='form-control' name='" + o.InputName + "' id='" + o.InputName + "' />";
S = S + "<div class='input-group-btn'>";
S = S + "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>" + o.ButtonText + "<span class='caret'></span></button>";
S = S + "<ul class='dropdown-menu dropdown-menu-right' role='menu'>";
//可以由Sections參數或Items參數設置下拉條目，Sections的優先級比Items高
if (o.Sections!== undefined)
{ $.each(o.Sections,function(n,value){
//從第2節開始，在每節的頂部添加一條分割線
if (n>0) { S=S + "<li class='divider'></li>"; }
//如果設置了ItemHeader參數，則給該節添加標題文本
if (value.ItemHeader!==undefined) { S = S + "<li class='dropdown-header'>" + value.ItemHeader + "</li>"; }
CreateItem(value);
});
}
else
{
CreateItem(o);
}
var SelText="";
var SelData="";
function CreateItem(Items)
{
$.each(Items.Items,function(n,Item){
//如果ItemData參數沒有定義，則把ItemText參數傳給ItemDate
if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}
S=S + "<li><a href='#' ItemData='" + Item.ItemData + "' >" + Item.ItemText + "</a></li>";
//如果設置了Selected參數，則獲取該條目的ItemDada和ItemText。
//如果有多個條目設置該參數，則獲取的是滿足條件最後一個條目
if (Item.Selected==true) { SelText=Item.ItemText;SelData=Item.ItemData;}
});
}
S =S + "</ul></div></div>";
Obj.html(S);
var Input=Obj.find("input");
//如果有條目設置Selected參數，則調用設置活動條目的函數
if (SelText!="") { SetData(SelText,SelData); }
//給所有的條目綁定單擊事件，單擊後調用設置活動條目的函數
Obj.find("a").bind("click", function(e) {SetData($(this).html(),$(this).attr("ItemData"));});
//如果ReadOnly參數設置為true，則屏蔽掉文本框的相關事件，使得文本框不能編輯。（而又顯示為激活狀態）
if (o.ReadOnly==true)
{
Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});
}
//設置MaxHeight參數後（大於0），則設置下拉菜單的最大高度，若條目過多，會出現垂直滾動條
if (o.MaxHeight>0)
{
var UL=Obj.find("ul");
if (UL.height()>o.MaxHeight)
{UL.css({'height':o.MaxHeight,'overflow':'auto'});}
}
function SetData(Text,Data)
{
Input.val(Text);
if (o.onSelect)
{ o.onSelect(o.InputName,Data);
}
}
});
}
})(jQuery);
</script>
下面是幾個用法實例：對Id為DropDownList的div元素運用組件，則在該div內部添加一個DropDownList組件
1、用Items屬性實現下拉菜單（所有菜單項都在一個組裡，沒有組標題，沒有分割線）
function ShowData(InputName,Data)
{
alert(InputName + ":" + Data);
}
$("#DropDownList").DropDownList(
{
InputName:"Q",
ButtonName:"參考",
onSelect : function(I,Data)
{
ShowData(I,Data);
},
Items:[
{ItemText:"示例1",ItemData:"Demo1",Selected:true},
{ItemText:"示例2",ItemData:"Demo2"},
{ItemText:"示例3",ItemData:"Demo3"}
]
});
效果圖：
2、用Sections屬性實現下拉菜單（菜單組之間有分割線，菜單組可以設置組標題）
function ShowData(InputName,Data)
{
alert(InputName + ":" + Data);
}$("#DropDownList").DropDownList(
{ InputName:"Q",
ButtonText:"參考",
onSelect : function(I,Data)
{
ShowData(I,Data);
},
Sections:[
{
ItemHeader:"全部",
Items:[
{ItemText:"全部",ItemData:"All"}
]
},
{
Items:[
{ItemText:"示例1",ItemData:"Demo1",Selected:true},
{ItemText:"示例2"
}
]
}
]
});
效果圖：
3、實現全國省份直轄市的下拉選擇，要設置MaxHeight屬性
function ShowData(InputName,Data)
{
alert(InputName + ":" + Data);
}
$("#DropDownList").DropDownList(
{
InputName:"Q",
ButtonText:"參考",
MaxHeight:310,
onSelect : function(I,Data)
{
ShowData(I,Data);
},
Sections:[
{
ItemHeader:"直轄市",
Items:[
{ItemText:"北京",ItemData:"Beijing"},
{ItemText:"上海",ItemData:"Shanghai",Selected:true},
{ItemText:"天津",ItemData:"Tianjin"},
{ItemText:"重慶",ItemData:"Chongqing"}
]
},
{
ItemHeader:"華東地區",
Items:
[
{ItemText:"山東",ItemData:"Shandong"},
{ItemText:"江蘇",ItemData:"Jiangsu"},
{ItemText:"安徽",ItemData:"Anhui"},
{ItemText:"浙江",ItemData:"Zhejiang"},
{ItemText:"福建",ItemData:"Fujian"}
]
},
{
ItemHeader:"華南地區",
Items:[
{ItemText:"廣東",ItemData:"Guangdong"},
{ItemText:"廣西",ItemData:"Guangxi"},
{ItemText:"海南",ItemData:"Hainan"}
]
},
{
ItemHeader:"華中地區",
Items:[
{ItemText:"湖北",ItemData:"Hubei"},
{ItemText:"湖南",ItemData:"Hunan"},
{ItemText:"河南",ItemData:"Henan"},
{ItemText:"江西",ItemData:"Jiangxi"}
]
},
{
ItemHeader:"華北地區",
Items:[
{ItemText:"河北",ItemData:"Hebei"},
{ItemText:"山西",ItemData:"Shanxi"},
{ItemText:"內蒙古",ItemData:"Neimenggu"}
]
},
{
ItemHeader:"西北地區",
Items:[
{ItemText:"寧夏",ItemData:"Ningxia"},
{ItemText:"新疆",ItemData:"Xinjiang"},
{ItemText:"青海",ItemData:"Qinghai"},
{ItemText:"陝西",ItemData:"Shaanxi"},
{ItemText:"甘肅",ItemData:"Gansu"},
]
},
{
ItemHeader:"西南地區",
Items:[
{ItemText:"四川",ItemData:"Sichuan"},
{ItemText:"雲南",ItemData:"Yunnan"},
{ItemText:"貴州",ItemData:"Guizhou"},
{ItemText:"西藏",ItemData:"Xizang"}
]
},
{
ItemHeader:"東北地區",
Items:[
{ItemText:"遼寧",ItemData:"Liaoning"},
{ItemText:"吉林",ItemData:"Jilin"},
{ItemText:"黑龍江",ItemData:"Heilongjiang"}
]
}
]
});
效果圖：
唯一的遺憾就是有滾動條的時候，滾動條會覆蓋下拉菜單右側的兩個圓角，如果真要完美的話，可能要對Bootstrap中的源代碼進行修改了。
以上內容是小編給大家介紹的創建基於Bootstrap的下拉菜單的DropDownList的JQuery插件的全部內容，希望對大家有所幫助！