模拟select

比眉伴天荒 2022-08-24 04:27 143阅读 0赞

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

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

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.ο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被选中  
    \}
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.ο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][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)  
    \}
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.ο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>
6.

[http_album.hi.csdn.net_app_uploads_wtcsy_20081204_225637264.p.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081204/225637264.p.gif