//獲取一個DIV的絕對坐標的功能函數,即使是非絕對定位,一樣能獲取到function getElCoordinate(dom) { var t = dom.offsetTop; var l = dom.offsetLeft; dom=dom.offsetParent; while (dom) {  t += dom.offsetTop;  l += dom.offsetLeft;	dom=dom.offsetParent; }; return {  top: t,  left: l };}//兼容各種瀏覽器的,獲取鼠標真實位置function mousePosition(ev){	if(!ev) ev=window.event;  if(ev.pageX || ev.pageY){    return {x:ev.pageX, y:ev.pageY};  }  return {    x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,    y:ev.clientY + document.documentElement.scrollTop - document.body.clientTop  };}//給DATE類添加一個格式化輸出字串的方法Date.prototype.format = function(format)  {    var o = {     "M+" : this.getMonth()+1, //month    "d+" : this.getDate(),  //day    "h+" : this.getHours(),  //hour    "m+" : this.getMinutes(), //minute    "s+" : this.getSeconds(), //second ‘	 //quarter    "q+" : Math.floor((this.getMonth()+3)/3),    "S" : this.getMilliseconds() //millisecond   }    if(/(y+)/.test(format)) format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));    for(var k in o)if(new RegExp("("+ k +")").test(format))     format = format.replace(RegExp.$1,      RegExp.$1.length==1 ? o[k] :       ("00"+ o[k]).substr((""+ o[k]).length));    return format;}<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">GooCombo.JS文件</pre><pre></pre><pre></pre><pre></pre><pre name="code" class="javascript">/*下拉框定義--GooCombo類*///dom :要被綁定的DOM對象，必須要有其ID或者NAME，且未被JQUERY對象化//property :JSON變量，SLIDER的詳細參數設置//目前，構造函數可接受用普通DOM容器或者直接傳送SELECT控件來進行渲染function GooCombo(dom,property){	this.$div=null;//渲染完畢后最父框架的DIV	this.$id=null;//this.$div中SELECT控件的ID	this.$name=null;//this.$div中SELECT控件的NAME	this.$width = property.width; //下拉框控件的寬度，必填項  	this.$haveIcon=property.haveIcon||false;	this.$input = $("<input type='text' value='" + property.text + "' " + (property.readOnly ? "readonly='readonly'" : "") + (this.$haveIcon ? " style='margin-left:20px;width:" + (this.$width - 39) + "px'" : "") + "/>"); //下拉框控件中始終顯示的文本框INPUT	this.$btn=$("<div class='btn_up'></div>");//下拉框右部的按鈕	this.$data=[];//下拉框控件的所有顯示文字和值,二維數組	this.$type="basic";//下拉框控件的運行模式，有basic基本,multiple可多選,filter過濾顯示 三種,默認為basic	this.$selectHeight=property.selectHeight||0;	this.$list=$("<ul style='width:"+(this.$width-2)+"px;height:"+property.selectHeight+"px;'></ul>");//下拉框的列表JQUERY對象	this.$lastSelect=null;//當前最近一次被選中的單元,在this.$type="multiple"時，它將不發揮其記錄作用	this.$select = null; //保存所選值的單元一般為select控件	this.$autoLoad=false;//是否動設置為動態載入數據，既下拉動作觸發時再載入數據，默認為FALSE()	this.$alreadyLoad=false;//是否已經載入完了數據,默認為false	//設置為動態自動獲取數據(渲染后Combo中的input框被選中后載入數據)	this.setAutoLoad=function(bool){		this.$autoLoad=true;	};	if(property.autoLoad) this.setAutoLoad(property.autoLoad);	this.$ajaxType=null;//，其變量為一個遠程鏈接參數的JSON數組，格式例如：{url:"website/pp.php",type:"POST",para:(與JQUERY中的AJAX方法中傳參DATA一樣)}默認為空	this.setAjaxType=function(json){		this.$ajaxType.url=json.url;		this.$ajaxType.type=json.type;		this.$ajaxType.para=json.para;		this.$ajaxType.dataType=json.dataType;	};if (property.ajaxType) this.setAjaxType(property.ajaxType);	//開始構造函數主要內容	if(dom!=null && dom.tagName=="SELECT"){		var temp="";		for(var i=0;i<dom.length;i++){			this.$data[i]=[(dom.options[i].value||dom.options[i].text),dom.options[i].text,""];			temp+="<a href='#'><p "+"value='"+this.$data[i][0]+"'>"+this.$data[i][1]+"</p></a>";		}		this.$list.append(temp);		this.$id=dom.id;		this.$name=dom.name;		if(dom.multiple) this.$type="multiple";		this.$select=$(dom);		this.$select.wrap("<div class='Combo' id='Combo_"+this.$id+"'></div>")		this.$div=this.$select.parent(".Combo");	}	else{		this.$div=$(dom);		this.$div.addClass("Combo");		this.$select=$("<select></select>");		this.$div.append(this.$select);	}	//this.$div.before(this.$septum);	this.$div.css({width:this.$width+"px"});	this.$div.append("<div class='text' style='width:"+(this.$width-19)+"px;'></div>").append(this.$btn).append(this.$list);	this.$div.children("div:eq(0)").append("<div class='top_border'></div>").append(this.$input);		//如果DOM為一個SELECT控件，則property中的屬性還可以覆蓋掉原來的ID，NAME ,type="multple"的默認設置	//ID,NAME,TYPE如果在傳入SELECT時就已經通過SELECT來定義，則PROPERTY中可以不用再寫	if(property.id)		{this.$id=property.id;this.$select.attr("id",property.id);}	if(property.name)	{this.$name=property.name;this.$select.attr("name",property.name);}	if(property.type){		this.$type=property.type;		if(property.type=="multiple") {this.$select.attr("size",1);this.$select.attr("multiple",property.type);}		else	this.$select.removeAttr("multiple");	}	//載入一組數據的方法	this.loadListData = function (data) {	  this.$data = [];	  if (this.$list.children("a").length > 0) {	    this.$list.empty();	    this.$select.empty();	  }	  temp = "", temp2 = "";	  for (i = 0; i < data.length; ++i) {	    this.$data[i] = [data[i][0], data[i][1], data[i][2] || ""];	    if (this.$type== "filter")//在這里可以修改你想類型 basic 當鼠標點擊進去是否展現初始數據	      temp += "<a href='#'><p " + (this.$haveIcon ? "style='text-indent:19px;background:" + this.$data[i][2] + "' " : "") + "value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</p></a>";	    temp2 += "<option value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</option>";	  }	  if (this.$type == "filter")	  		  this.$list.append(temp);	  this.$select.append(temp2);	  this.$alreadyLoad = true;	};	if(property.data)	this.loadListData(property.data);	//動態遠程載入數據，AJAX請求的參數將讀取this.$ajaxType中的設置	this.loadListDataAjax=function(){		var inthis=this;		$.ajax({			  type:this.$ajaxType.type,			  url:this.$ajaxType.url,			  dataType:this.$ajaxType.dataType,			  data:this.$ajaxType.para,		success:function(data){			inthis.loadListData(data);		}});};//提示文字$("input[type='text']").each(function () {  if ($(this).val() == property.text) {    $(this).bind("focus", function () {      $(this).val("");    }).blur(function () {      $(this).val(property.text)    });  }});	//綁定當INPUT框被選中時的事件	this.$input.bind("focus", { inthis: this }, //如果this.$autoLoad或!this.$alreadyLoad有一個為FALSE，則ajaxType將無效，可不傳	function (e) {	  if (e && e.preventDefault) e.preventDefault(); //阻止默認瀏覽器動作(W3C)	  else window.event.returnValue = false; //IE中阻止函數器默認動作的方式	  var inthis = e.data.inthis;//	  inthis.$autoLoad = true;//	//	//	  inthis.$alreadyLoad = false;//	  inthis.$ajaxType = false;	  if (!inthis.$alreadyLoad && inthis.$autoLoad) {	    if (inthis.$ajaxType) {//如果是遠程AJAX獲取數據	      inthis.loadListDataAjax();	    }	    else       {	      inthis.loadListData(inthis.$data);	    }	  }	  var list = inthis.$list;	  var height = inthis.$selectHeight;	  var width = inthis.$width;	  list.css("display", "block");	  $(document).bind("mouseup", function (e) {	    var locate = getElCoordinate(list.get(0));	    var ev = mousePosition(e);	    if (locate.left + width < ev.x || locate.left > ev.x || locate.top - 22 > ev.y || locate.top + height + 2 < ev.y) {	      list.css("display", "none");	    }	    this.onmouseup = null;	    return false;	  });	  return false;	});	//綁定當INPUT框中的內容被改變時的事件	if(!this.$readOnly){		if(this.$type=="filter"){//當type=="filter"時		  this.$input.bind("change", { inthis: this }, function (e) {		    var inthis = e.data.inthis;		    //var text=""+this.value;		    var text = $.trim(this.value)		    var data = inthis.$data;		    var temp = "";		    if (inthis.$ajaxType) {//如果ajaxType屬性有設置，則filter模式下，下拉框控件將在每次change時，動態從獲取數據		      inthis.$ajaxType.para["search"] = text; //后臺需要對REQUEST傳入的search變量有一個向前模糊匹配的查詢功能		      inthis.loadListDataAjax();		    }		    else {		      for (var i = 0; i < data.length; ++i)          {		        if (data[i][1].indexOf(text) == 0)		        temp +="<a href='#'><p " + (inthis.$haveIcon ? "style='text-indent:19px;background:" + data[i][2] + "' " : "") + "value='" + data[i][0] + "'>" + data[i][1] + "</p></a>";		      }		      inthis.$list.empty();		      inthis.$list.append(temp);		    }		  });		}		else{		  this.$input.bind("change", { inthis: this }, function (e) {		    var text = this.value;		    var inthis = e.data.inthis;		    var data = e.data.inthis.$data;		 		    for (var i = 0; i < data.length; ++i) {		      if (data[i][1] == text) {		        if (inthis.$lastSelect)		          inthis.$lastSelect.removeClass("active");		        inthis.$lastSelect = inthis.$list.children("a:eq(" + i + ")").addClass("active");		        now = inthis.$list.children("a:eq(" + i + ")").children("p");		        inthis.$select.val(data[i][0]);		        if (inthis.$haveIcon) {		          $(this).parent(".text").css({		            background: now.css("background"),		            "background-image": "url(../images/combo_icon.gif)",		            "background-position": now.css("background-position"),		            "background-repeat": now.css("background-repeat")		          });		        }		        break;		      }		    }		  });		}		var once=null;		this.$input.bind("keyup", { input: this.$input, list: this.$list }, function (e) {		  if (!e) e = window.event;		  if (e.keyCode == 13)		    e.data.list.css("display", "none");		  else if (e.keyCode == 40) {		    var temp = e.data.list.children("a:eq(0)");		    temp.focus();		    temp.toggleClass("focus");		  }		  else {		    //alert("進入keyup");		    once = null;		    once = setTimeout(function () { e.data.input.change(); }, 500);		  }		});	}	//綁定下拉按鈕的事件	this.$btn.bind("mousedown",function(){		inthis=$(this);		inthis.removeClass("btn_up");		inthis.addClass("btn_down");	});	this.$btn.bind("mouseup",{input:this.$input},function(e){		inthis=$(this);		inthis.removeClass("btn_down");		inthis.addClass("btn_up");		e.data.input.focus();	});	//選中下拉框中一個指定索引的值（如果是multiple模式，且這個值原來已經被選定，則運行此函數后將會取消該選定）	this.selectValue=function(index){		if(index>0&&index<this.$data.length){			var p=this.$list.children("a:eq("+index+")");			if(this.$lastSelect)	this.$lastSelect.removeClass("active");			this.$lastSelect=p;			p.click();		}	};	//綁定下拉列表單元被點擊時的事件	this.$list.bind("click",{inthis:this},function(e){		if ( e && e.preventDefault )	e.preventDefault();//阻止默認瀏覽器動作(W3C)		else	window.event.returnValue = false;//IE中阻止函數器默認動作的方式		if(!e) e=window.event;		var clicked=$(e.target);		var inthis=e.data.inthis;		if(clicked.attr("tagName")=="A")	clicked=clicked.children("p");		else if(clicked.attr("tagName")=="UL"){			this.style.display="none";			return;		}						if(inthis.$haveIcon){			inthis.$input.parent(".text").css({			background:clicked.css("background"),			"background-image":"url(../images/combo_icon.gif)",			"background-position":clicked.css("background-position"),			"background-repeat":clicked.css("background-repeat")				});		}		if(inthis.$type!="multiple"){			if(inthis.$lastSelect)	inthis.$lastSelect.removeClass("active");			inthis.$lastSelect=clicked.parent("a").addClass("active");			this.style.display="none";			inthis.$select.val(clicked.attr("value"));			inthis.$input.val(clicked.text());		}		else{			clicked.parent("a").toggleClass("active");			var optionList=inthis.$select.get(0).options;			for(var i=0;i<optionList.length;++i){				if(optionList[i].value==clicked.attr("value")){					optionList[i].selected=!optionList[i].selected;					break;				}			}			inthis.$input.val(clicked.text()+" , ……");		}		inthis.$select.change();		//alert(inthis.$select.val());		return false;	});	//綁定當用戶用鼠標上/下滑過選擇列表內容時的事件	this.$list.bind("mouseover",{list:this.$list},function(e){		if(!e) e=window.event;		var clicked=$(e.target);		if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");		else if(clicked.attr("tagName")=="UL"){			return;		}		clicked.focus();		clicked.addClass("focus");	});	this.$list.bind("mouseout",{list:this.$list},function(e){		if(!e) e=window.event;		var clicked=$(e.target);		if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");		else if(clicked.attr("tagName")=="UL")	return;		clicked.removeClass("focus");	});	//綁定當用戶用上/下方向鍵選擇列表內容時的事件	this.$list.bind("keydown",{inthis:this},function(e){		if(!e) e=window.event;		var inthis=e.data.inthis;		if(e.keyCode==13){//回車			if ( e && e.preventDefault )	e.preventDefault();//阻止默認瀏覽器動作(W3C)			else	window.event.returnValue = false;//IE中阻止函數器默認動作的方式			var clicked=$(e.target);			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");			else if(clicked.attr("tagName")=="UL")	return;			clicked.focus();			clicked.click();			return false;		}		else if(e.keyCode==40){			var clicked=$(e.target);			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");			else if(clicked.attr("tagName")=="UL")	return;			var now=$(e.target);			var next=$(e.target).next("a:eq(0)");			if(next.length>0){				now.removeClass("focus");				next.addClass("focus");				next.focus();			}		}		else if(e.keyCode==38){			var clicked=$(e.target);			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");			else if(clicked.attr("tagName")=="UL")	return;			var now=$(e.target);			var prev=$(e.target).prev("a");			if(prev.length>0){				now.removeClass("focus");				prev.addClass("focus");				prev.focus();			}		}	});	//返回下拉框的被選值//如果是多選，則會返回一串值構成的字符串，以逗號隔開	//此下拉框也可放在一般的FORM之中，并像普通的SELECT下拉菜單控件一樣操作，當FORM提交時，后臺可request獲取一個被選取值的數組	this.getValue=function(){		return this.$select.val();	};	//綁定當控件中隱藏的SELECT的值變化以后,觸發的方法,通過對其設置，可達到drop-on-drop的多個下拉框相互聯動功能,參數Fn為要觸發執行的函數	this.bindValueChange=function(Fn){	  this.$select.bind("change", Fn);	};	//刪除一個選擇項,index為定位參數，從0開始（即第一行的選擇項）	this.delItem=function(index){		if(index>-1&&index<this.$data.length){			this.$data.splice(index,1);			this.$select.get(0).options.remove(index);			this.$list.children("a:eq("+index+")").remove();		}	};	//增加一個選擇項，項,index為定位參數，從0開始（即第一行的選擇項）	this.addItem=function(index,Item){		if(index=this.$data.length){//如果是加在最末尾			this.$data[index]=Item;			this.$list.append("<a href='#'><p "+(this.$haveIcon? "style='text-indent:19px;background:"+Item[2]+"' " : "")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");		}		else{			this.$data.splice(index,0,Item);			this.$list.children("a:eq("+index+")").before("<a href='#'><p "+(this.$haveIcon? "style='text-indent:19px;background:"+Item[2]+"' " : "")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");		}		this.$select.get(0).options.add(new Option(Item[1], Item[0]));	};	//清除所有選項	this.clearItems=function(){		this.$data=null;		this.$data=[];		this.$list.empty();		this.$select.get(0).options.length=0;		this.$select.empty();		this.$alreadyLoad=false;	};} //將此類的構造函數加入至JQUERY對象中jQuery.extend({	createGooCombo: function(dom,property) {		return new GooCombo(dom,property); }}); </pre><br>HTML頁面:(要先引入jquery 庫)<br>       $(document).ready(function () {<br>              <br>           //創建控件開始<br>            var property =<br>           {<br>               id: "demo",<br>               name: "demo",<br>               type: "filter",<br>               readOnly: false,<br>               width: 160,<br>               selectHeight: 140,<br>               autoLoad: true,<br>               haveIcon: false,<br>               text: "可輸入員工姓名查找"<br>           }<br>             var combo = $.createGooCombo(document.getElementById("combo"), property);<br>             combo.loadListData(datas);<br>             //創建控件結束<br>})<br><br><span style="color:#FF0000">datas是由ashx一般處理文件生成二維數組的json字符串 var datas=["+jsonString+"]</span><br><pre name="code" class="vb"> </pre><pre name="code" class="csharp">  public string CreateJsonParameters(DataTable dt)  {    System.Text.StringBuilder sb = new System.Text.StringBuilder();    if (dt != null)    {      for (int i = 0; i < dt.Rows.Count -1; i++)      {        if (i < dt.Rows.Count - 1)        {          sb.Append("[" + dt.Rows[i]["EmployeeID"].ToString() + ", " + dt.Rows[i]["EmployeeNameID"].ToString() + "],");                }        else if (i == dt.Rows.Count - 1)        {          sb.Append("[" + dt.Rows[i]["EmployeeID"].ToString() + "," + dt.Rows[i]["EmployeeNameID"].ToString() + "],");        }      }    }           return   sb.ToString().TrimEnd(",".ToCharArray());    }</pre><br><br><br><br> <pre></pre><pre></pre><pre></pre><pre></pre><pre></pre><pre></pre><pre></pre><pre></pre><pre></pre>  </pre></pre></pre>