模拟select

来源:互联网 发布:左程云 算法 编辑:程序博客网 时间:2024/05/16 18:29

只能说是看上去简单 实现起来非常的不容易。。

写的不好 细节太多  没有较好的基本功很难完善好。。 所以模拟的并不好

 

  1. <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>
  2. var data=["张三","李四","王老五","赵六","孙其","周八","大白痴"]
    var element = new Array()
  3. 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被选中
    }
  4. 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)
    }
  5. 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>