模拟select

来源：互联网发布：左程云算法编辑：程序博客网时间：2024/05/24 15:42
只能说是看上去简单实现起来非常的不容易。。
写的不好细节太多没有较好的基本功很难完善好。。所以模拟的并不好
<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.onclick=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.onblur=function(){self.data[input.jilu]=input.value;if(element!=""){element.getElementsByTagName("div")[input.jilu].innerHTML=input.value}}
self.input=input
input.onclick=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.onclick=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.onmousemove=function(){this.style.backgroundColor="3B97D3"}
  div1.onmouseout=function(){this.style.backgroundColor=""};
  (function(div1,i){div1.onclick=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>