HTML中默认的select控件比较难看,大家可以参考,本文提供一种解决思路,当然也可以用CSS实现。
function selectInit(tid,isIn){
if(!$("#"+tid)[0]){return false;}
var dv=$("#"+tid).val(),dt=$("#"+tid+" option:eq(0)").html(),vs=[],ts=[],na=$("#"+tid).attr("name"),mHtml="",curDx=0,
w=$("#"+tid).width(),h=$("#"+tid).height()-2;
na=na?na:tid;
$("#"+tid+" option").each(function(dx){
var cv=$(this).val(),ct=$(this).html();
mHtml+='<div> '+ct+'</div>';
vs.push(cv);
ts.push(ct);
if($(this).attr("selected")=="selected"||cv===dv){
dt=$(this).html();
curDx=dx;
}
});
var iHTML='<span style="display:inline-block;width:'+w+'px;height:'+h+'px;border:1px solid #7f9db9;padding:1px">'+
'<input type="hidden" id="'+tid+'" name="'+na+'" value="'+dv+'"><input id="'+tid+'_show" value="'+dt+'" '+(isIn?'readOnly="readOnly" style="cursor:default;':' style="')+'border:none;width:'+(w-16)+'px;height:'+(h-3)+'px;line-height:'+(h-3)+'px;float:left;padding:2px 1px 1px 1px;">'+
'<span onselectstart="return false" style="display:block;cursor:pointer;text-align:center;font-size:8px;width:'+12+'px;height:'+(h-2)+'px;border:1px solid #b8cbf6;line-height:'+(h-2)+'px;background:#b3d1fc;float:left;color:#4d6185;">V</span>'+
'</span>';
$("#"+tid).replaceWith(iHTML);
$("body").append('<div style="position:absolute;left:0px;top:0px;display:none;width:'+(w+2)+'px;height:'+(ts.length*18)+'px;background:#fff;border:1px solid #7f9db9;" id="'+tid+'_select">'+mHtml+'</div>');
$("#"+tid+"_select div").css({'font-size':'13px','cursor':'pointer','line-height':'17px','text-align':'left','width':'100%','height':'17px','padding-top':'1px'});
$("#"+tid+"_select div").hover(function(){
$("#"+tid+"_select div").css({'background-color':'#ffffff'});
$(this).css({'background-color':'#2f6ac6'});
},function(){
$(this).css({'background-color':'#ffffff'});
});
$("#"+tid+"_select div").click(function(){
var cdx=$("#"+tid+"_select div").index(this);
curDx=cdx;
$("#"+tid).val(vs[cdx]);
$("#"+tid+"_show").val(ts[cdx]);
$("#"+tid+"_select").hide();
});
$("#"+tid+"_show").parent().click(function(){
//p对象为工具对象,引入地址:http://www.h928.com/js/jTools-min-encode.js
var xy=p.getPos(this),cx=parseInt(xy['x']),cy=parseInt(xy['y'])+h+4;
if(navigator.userAgent.indexOf("MSIE 7.0")>0){
cx-=2;
cy-=2;
}
$("#"+tid+"_select").show();
$("#"+tid+"_select").css({'left':cx+"px",'top':cy+"px"});
$("#"+tid+"_select div:eq("+curDx+")").css({'background-color':'#2f6ac6'});
return false;
});
$(document).click(function(){
$("#"+tid+"_select").hide();
});
$("#"+tid+"_select").click(function(){
return false;
});
}
调用方式:
$(function(){
selectInit("selectID",true);//提供SELECT控件的ID值
}