jquery 自定义select控件

function selectControl(name,contorDiv){
			this.contorDiv=contorDiv;
			this.scName=name;

			this.selectBoxName=name+'_selectBox'	//select 弹出的div
			this.valueBoxName=name+'_valueBox'		//select 
			this.inputName=name+'_selectValue'
			this.clickBoxName=name+'_clickBox'
			this.signName=name+'_sign'
			this.colNum=3;
			this.colFontLength='10';				//10个汉字20个字符
			this.clickCount;						//当前选中项
			this.jsonData=[
			{name:'天津0',value:'天津0'},
			{name:'天津1',value:'天津1'},
			{name:'天津2',value:'天津2'},
			{name:'天津3',value:'天津3'},
			{name:'天津4',value:'天津4'},
			{name:'天津5',value:'天津5'},
			{name:'天津6',value:'天津6'},
			{name:'天津7',value:'天津7'}]
			var temp=this;
			this.showDiv=function (){
				$('#'+temp.selectBoxName).show();
			}
			this.cloDiv=function (){
				$('#'+temp.selectBoxName).hide();
			}
			//初始化方法
			this.init=function (){
				$('#'+temp.contorDiv).append(temp.createStr())
				$(document.body).bind('click',function (){
					var eleId=event.srcElement.id;
					if(eleId!=temp.selectBoxName && eleId!=temp.valueBoxName && eleId!=temp.inputName&& eleId!=temp.signName){
						temp.cloDiv()
					}
				})
				$('#'+temp.signName).bind('mouseover',function (){
					
					$(this).css('background','url("droparrowover.gif") no-repeat right center')
					window.event.cancelBubble = true;
				})
				$('#'+temp.signName).bind('mouseout',function (){
					
					$(this).css('background','url("droparrow.gif") no-repeat right center')
					window.event.cancelBubble = true;
				})
				temp.setData();
			}
			this.createStr=function (){
				var createStr=''
				createStr+="<div id='"+temp.clickBoxName+"' class='_clickBox' onclick='"+temp.scName+".showDiv()'>"
				createStr+="<table cellpadding=\"0\" cellspacing=\"0\" style='background:#DDD url(selectBg.png) repeat-x left top;'>"
				createStr+="<tr>"
				createStr+="<td id='"+temp.valueBoxName+"' class='valueBox'><input type='text' id='"+temp.inputName+"'></td>"
				createStr+="<td id='"+temp.signName+"' class='sign'>&nbsp;&nbsp;</td>"
				createStr+="</tr></table></div>"	
				createStr+="<div id='"+temp.selectBoxName+"' style='display:block;position:absolute;z-index:10;border:1px solid;width:500;height:250;overflow-y:auto;overflow-x:hidden'></div>"
				return createStr;
				
			}
			//设置数据
			this.setData=function (){
				var tabStr='<table width="100%" id="'+temp.scName+'_valueList" class="valueList" cellpadding="0" cellspacing="0">'
				var romNum=parseFloat(temp.jsonData.length)/parseFloat(temp.colNum)
				if(romNum!=parseInt(romNum)){
					romNum=parseInt(romNum)+1;
				}
				for(var i=0;i<romNum;i++){
					tabStr+='<tr id="'+temp.scName+'_s_tr_'+i+'"></tr>'	
				}
				var count=0;
				var trId,tdStr,name,value;

				tabStr+='</table>'
				$('#'+temp.selectBoxName).html(tabStr)
				$(temp.jsonData).each(function (i){
					trId=temp.scName+'_s_tr_'+count
					name=temp.jsonData[i].name
					value=temp.jsonData[i].value
					if(temp.fontLen(name)>temp.colFontLength){
						name=name.substr(0,temp.colFontLength)+'......'
					}
					tdStr='<td title='+temp.jsonData[i].name+' value='+i+' onclick="'+temp.scName+'.dataClick(this)">'+name+'</td>'
					$('#'+trId).append(tdStr)
					if((i+1)%temp.colNum==0 && i!=0){
						count++;
					}
				});
			}
			this.dataClick=function(obj){
				//alert($(obj).val())
				var i=$(obj).val();
				temp.clickCount=i;
				var inputId='#'+temp.inputName
				$(inputId).attr('value',temp.jsonData[i].name);
				$(inputId).attr('state',temp.jsonData[i].value);

			}
			this.fontLen=function (value){
				return value.replace(/[^\x00-\xff]/g, 'xx').length;
			}
			

		}
		var select=new selectControl('select','select1');
		select.init();
		$('#select1 div').bgiframe();

太简单了就不写注释了
大家有空的时候踩踩 本来是不想写的想找个控件改改就好结果找不到就知道能写了
jquery 请自己添加这里不多说了