JQuery组件基于Bootstrap的DropDownList（完整版）

 <ul class="dropdown-menu dropdown-menu-right" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
</ul>

.dropdown-menu {
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 2px 0 0;
 font-size: 14px;
 text-align: left;
 list-style: none;
 background-color: #fff;
 -webkit-background-clip: padding-box;
  background-clip: padding-box;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, .15);
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu > li > a {
 display: block;
 padding: 3px 20px;
 clear: both;
 font-weight: normal;
 line-height: 1.42857143;
 color: #333;
 white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
 color: #262626;
 text-decoration: none;
 background-color: #f5f5f5;
}

(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' >";
  S = S   "<li><ul class='dropdown-menu ' style='display:inherit;position:inherit;top:0;float:inherit;padding:0;border:0px;border-radius:0px;-webkit-box-shadow: inherit;box-shadow: inherit;'>";

  var SelText,SelData;

  if (o.Sections!== undefined)
  {
   $.each(o.Sections,function(n,value){
   if (n>0) {S=S   "<li class='divider'></li>";}
   if (value.ItemHeader!==undefined) {S = S   "<li class='dropdown-header'>"   value.ItemHeader   "</li>";}
   CreateItem(value);
   });
  }
  else
  {
   CreateItem(o);
  }
 
  function CreateItem(Items)
  {
  $.each(Items.Items,function(n,Item){
   if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}
   S=S   "<li><a href='#' ItemData='"   Item.ItemData   "' >"   Item.ItemText   "</a></li>";
   if (Item.Selected==true) {SelText=Item.ItemText;SelData=Item.ItemData;}
  });
  }
 
  S =S   "</ul></li></ul></div></div>";

  Obj.html(S);

  var Input=Obj.find("input");

  if (SelText!="") {SetData(SelText,SelData);}

  Obj.find("a").bind("click", function(e) {
      SetData($(this).html(),$(this).attr("ItemData"));
     });

  if (o.ReadOnly==true)
  {
  Input.bind("cut copy paste keydown", function(e) {e.preventDefault();}); 
  }

  if (o.MaxHeight>0)
  {
  var UL=Obj.find("ul[style]");
  UL.css({'max-height':o.MaxHeight,'overflow':'auto'});
  }

  function SetData(Text,Data)
  {
  Input.val(Text);
  if (o.onSelect) {o.onSelect(o.InputName,Data);}
  }

 });
 }
})(jQuery);