自定义HTML中select控件

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值
}