非Select标签的选择框
用select做选择框与input放在一起总不太和谐.换了吧.
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
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
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<input type="text" onclick="Report.createSelect(this,{'2':'男','3':'女'})"
readonly="readonly">
</input>
效果: