建立基於Bootstrap的下拉式功能表的DropDownList的JQuery外掛程式，dropdownlistjquery

建立基於Bootstrap的下拉式功能表的DropDownList的JQuery外掛程式，dropdownlistjquery

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外掛程式的全部內容，希望對大家有所協助！