只能说是看上去简单 实现起来非常的不容易。。
写的不好 细节太多 没有较好的基本功很难完善好。。 所以模拟的并不好
- <style type="text/css">
.kuang{height:18px; width:80px; border:1px solid #96ADE1}
.input{border:0px; height:16px; width:50px; margin-top:2px; vertical-align:middle; float:left; cursor: pointer;}
.img{float:right;margin-top:1px;cursor: pointer;}
.xia{ border:1px solid #96ADE1; border-top:0px; height:auto; position:absolute}
.xiang{ height:22px; line-height:22px; vertical-align:middle; font-size:12px; padding-left:3px;cursor: pointer;}
</style>
<body><div id="ss" style=" width:200px; float:left"></div ><div id="dd" style=" width:300px; float:left"></div></body>
<script> - var data=["张三","李四","王老五","赵六","孙其","周八","大白痴"]
var element = new Array() - document.οnclick=function(){
if(element != "")
{document.body.removeChild(element);element=""}}
function select(id,data,func){
this.id =id //父元素id
this.data=data //数据源
this.func =func //不知道是做什么用的
this.input="" //记录那个破input元素
this.div="" //记录哪个div被选中
} - select.prototype.create =function(){
var self =this
var div =document.createElement("div")
div.className="kuang"
var input =document.createElement("input")
input.className="input"
input.value=self.data[0]
input.jilu=0
input.οnblur=function(){self.data[input.jilu]=input.value;if(element!=""){element.getElementsByTagName("div")[input.jilu].innerHTML=input.value}}
self.input=input
input.οnclick=function(event){self.createlist(event,this.parentNode)}
var img =document.createElement("img")
img.src="http://album.hi.csdn.net/app_uploads/wtcsy/20081204/225637264.p.gif"
img.className="img"
img.οnclick=function(event){self.createlist(event,this.parentNode)}
div.appendChild(input)
div.appendChild(img)
document.getElementById(this.id).appendChild(div)
} - select.prototype.createlist=function(e,obj){
var self =this
e=e||event
e.cancelBubble=true
if(element!="") {document.body.removeChild(element);element=""}
self.isopen=true
var div =document.createElement("div")
div.className="xia"
element=div
if(document.all)
{div.style.width=obj.offsetWidth}
else
{div.style.width=obj.offsetWidth-2}
var left=obj.offsetLeft;
var top =obj.offsetTop;
var height =obj.offsetHeight
while(obj=obj.offsetParent){
left=left+ obj.offsetLeft;
top=top+obj.offsetTop;}
div.style.left=left
div.style.top=top+height
document.body.appendChild(div)
for(var i=0;i<self.data.length;i++)
{var div1 =document.createElement("div")
if(document.all)
{div1.style.width="100%"}
else
{div1.style.width="100%"-3}
if(self.data[i]==self.input.value)
{div1.style.backgroundColor="3B97D3"}
div1.className="xiang"
div1.οnmοusemοve=function(){this.style.backgroundColor="3B97D3"}
div1.οnmοuseοut=function(){this.style.backgroundColor=""};
(function(div1,i){div1.οnclick=function(){self.change(div1,i)}})(div1,i)
div1.innerHTML=self.data[i]
div.appendChild(div1)}}
select.prototype.change=function(obj,num){
this.input.value=obj.innerHTML
document.getElementById(this.id).getElementsByTagName("input")[0].jilu=num}
var oo =new select("ss",data,"s")
oo.create()
var hh =new select("dd",data,"s")
hh.create()
</script>