<script>
(function($){ 
jQuery.fn.DropDownList = function(options) {
//設(shè)置插件的默認屬性  
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參數(shù)或Items參數(shù)設(shè)置下拉條目，Sections的優(yōu)先級比Items高   
if (o.Sections!== undefined)   
{    $.each(o.Sections,function(n,value){           
//從第2節(jié)開始，在每節(jié)的頂部添加一條分割線     
if (n>0) { S=S + "<li class='divider'></li>"; }     
//如果設(shè)置了ItemHeader參數(shù)，則給該節(jié)添加標題文本     
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參數(shù)沒有定義，則把ItemText參數(shù)傳給ItemDate     
if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}     
S=S + "<li><a href='#' ItemData='" + Item.ItemData + "' >" + Item.ItemText + "</a></li>";     
//如果設(shè)置了Selected參數(shù)，則獲取該條目的ItemDada和ItemText。     
//如果有多個條目設(shè)置該參數(shù)，則獲取的是滿足條件最后一個條目     
if (Item.Selected==true) { SelText=Item.ItemText;SelData=Item.ItemData;}   
});   
}     
S =S + "</ul></div></div>";   
Obj.html(S);    
var Input=Obj.find("input");   
//如果有條目設(shè)置Selected參數(shù)，則調(diào)用設(shè)置活動條目的函數(shù)   
if (SelText!="") { SetData(SelText,SelData); }    
//給所有的條目綁定單擊事件，單擊后調(diào)用設(shè)置活動條目的函數(shù)   
Obj.find("a").bind("click", function(e) {SetData($(this).html(),$(this).attr("ItemData"));});   
//如果ReadOnly參數(shù)設(shè)置為true，則屏蔽掉文本框的相關(guān)事件，使得文本框不能編輯。（而又顯示為激活狀態(tài)）  
if (o.ReadOnly==true)   
{    
Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});   
}    
//設(shè)置MaxHeight參數(shù)后（大于0），則設(shè)置下拉菜單的最大高度，若條目過多，會出現(xiàn)垂直滾動條  
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>

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"}  
] 
});

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"
}    
]   
}  
] 
});

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:"華東地區(qū)",    
Items:
[     
{ItemText:"山東",ItemData:"Shandong"},     
{ItemText:"江蘇",ItemData:"Jiangsu"},     
{ItemText:"安徽",ItemData:"Anhui"},     
{ItemText:"浙江",ItemData:"Zhejiang"},     
{ItemText:"福建",ItemData:"Fujian"}    
]  
},   
{  
ItemHeader:"華南地區(qū)",    
Items:[     
{ItemText:"廣東",ItemData:"Guangdong"},     
{ItemText:"廣西",ItemData:"Guangxi"},     
{ItemText:"海南",ItemData:"Hainan"}    
]   
},   
{    
ItemHeader:"華中地區(qū)",    
Items:[     
{ItemText:"湖北",ItemData:"Hubei"},     
{ItemText:"湖南",ItemData:"Hunan"},     
{ItemText:"河南",ItemData:"Henan"},     
{ItemText:"江西",ItemData:"Jiangxi"}   
]   
},   
{    
ItemHeader:"華北地區(qū)",    
Items:[     
{ItemText:"河北",ItemData:"Hebei"},     
{ItemText:"山西",ItemData:"Shanxi"},     
{ItemText:"內(nèi)蒙古",ItemData:"Neimenggu"}    
]   
},   
{    
ItemHeader:"西北地區(qū)",    
Items:[     
{ItemText:"寧夏",ItemData:"Ningxia"},     
{ItemText:"新疆",ItemData:"Xinjiang"},     
{ItemText:"青海",ItemData:"Qinghai"},     
{ItemText:"陜西",ItemData:"Shaanxi"},     
{ItemText:"甘肅",ItemData:"Gansu"},    
]   
},   
{    
ItemHeader:"西南地區(qū)",    
Items:[     
{ItemText:"四川",ItemData:"Sichuan"},     
{ItemText:"云南",ItemData:"Yunnan"},    
{ItemText:"貴州",ItemData:"Guizhou"},    
{ItemText:"西藏",ItemData:"Xizang"}    
]   
},   
{    
ItemHeader:"東北地區(qū)",   
Items:[     
{ItemText:"遼寧",ItemData:"Liaoning"},     
{ItemText:"吉林",ItemData:"Jilin"},     
{ItemText:"黑龍江",ItemData:"Heilongjiang"}    
]   
}  
] 
});