jquery 自定义select控件

zhengjie_dna

function selectControl(name,contorDiv){this.contorDiv=contorDiv;this.scName=name;this.selectBoxName=name+'_selectBox'//select 弹出的divthis.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'>  </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_'+countname=temp.jsonData.namevalue=temp.jsonData.valueif(temp.fontLen(name)>temp.colFontLength){name=name.substr(0,temp.colFontLength)+'......'}tdStr='<td title='+temp.jsonData.name+' value='+i+' >'+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.name);$(inputId).attr('state',temp.jsonData.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 请自己添加这里不多说了