自定义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值

}