非Select标签的选择框

 用select做选择框与input放在一起总不太和谐.换了吧.

var Report={};
Report.getOffset = function getOffset(e){
   var t = e.offsetTop;
   var l = e.offsetLeft;
   var w = e.offsetWidth;
   var h = e.offsetHeight-2;
   while(e=e.offsetParent){
      t += e.offsetTop;
      l += e.offsetLeft;
   }
   return{
      top : t,left : l,width : w,    height : h
   }
}
Report.createSelect = function createSelect(obj,filterArray){
   var offset= this.getOffset(obj);//在firefox下必须加this,不然报找不到函数。
   var size = 0;
$.each(filterArray, function(){
   size++;
}
);
var oldDiv = $("#div_" + obj.id);
if(oldDiv.length){
   if(oldDiv.css("display")=='none'){
      oldDiv.css("display","block");
   }
   else{
      oldDiv.css("display","none");
   }
}
else{
   var cDiv = $("<div></div>");
   cDiv.attr("id","div_" + obj.id);
   cDiv.css("position","absolute");
   cDiv.css("width",(offset.width) + "px");
   cDiv.css("height",size *20 + "px");
   cDiv.css("top",(offset.top+offset.height+2) + "px");
   cDiv.css("left",offset.left + "px");
   cDiv.css("background","#f7f7f7");
   cDiv.css("border","1px solid silver");
   $(document.body).append(cDiv);
   
   var uUl = $("<ul></ul>");
   uUl.attr("id","ul_" + obj.id);
   uUl.css("listStyle","none");
   uUl.css("margin","0");
   uUl.css("padding","0");
   uUl.css("fontSize","12px");
   cDiv.append(uUl);
   
$.each(filterArray, function(key, value){
   var lLi=$("<li></li>");
   lLi.attr("id","li_" + key);
   lLi.attr("value",key);
   lLi.css("textIndent","4px");
   lLi.css("height","20px");
   lLi.css("lineHeight","20px");
   lLi.text(value);
   uUl.append(lLi);
}
);
var liObj=$("li",uUl);
$.each(liObj, function(i,eachLi){
   eachLi.onmouseover=function(){
      this.style.background="#cccccc";
      this.style.color="red";
   }
   eachLi.onmouseout=function(){
      this.style.background="white";
      this.style.color="black";
   }
   eachLi.onclick=function(){
      obj.value= this.value;
      cDiv.css("display","none");
   }
});
}}

 

test.html

<input type="text" onclick="Report.createSelect(this,{'2':'男','3':'女'})"
readonly="readonly">
</input>

效果: