模拟select控件

div代码


<li id="li_01">
<span>公司</span>
<!--<select id="select">
<option selected="selected" value="星源整形美容院">星源整形美容院</option>
<option value="石家庄贵美人">石家庄贵美人</option>
<option value="没美联臣美容店">美联臣美容店</option>
<option value="河北雅芳亚美容分店">河北雅芳亚美容分店</option>
<option value="河北汇美芳">河北汇美芳</option>
<option value="谍仙姿">谍仙姿</option>
<option value="第一人家">第一人家</option>
<option value="天下第一">天下第一</option>
</select>-->
</li>


CSS样式


#li_01{
width:18%;
}
#select{
  width:82%;
  height:30px;
  float:right;
  font-family:"宋体";
  font-size:1.3em;
  line-height:30px;
  color:#4d4d4d;
  padding:0 0 0 2%;
  background-color:#fcfcfc; 
 border:1px solid #d9d9d9;
  border-radius:5px;
  vertical-align:middle;
}


.kuang{
  width:100%;
  width:80%\9;
  height:50px;
}
.input{
  width:75%;
  float:left;
  height:50px;
  vertical-align:middle;
  border:0px;
  cursor:pointer;
}
.img{
  float:right;
  margin:-22px 15% 0 0;
  margin:-22px 12% 0 0\0;
  *margin:-22px 34% 0 0;
  cursor:pointer;
}
/*@media screen{ .img {margin:-22px 12% 0 0;} }*/
.xia{
  width:9%;
  height:auto;
  margin:98px 0 0 5.5%;
  margin:-20px 0 0 -2%\9;
  background-color:#fafafa;
  border:1px solid #bfbfbf;
  position:absolute;
}
.xiang{
  width:130px;
  line-height:50px;
  vertical-align:middle;
  font-size:1.3em;
  padding-left:5%;
  cursor:pointer;
}




js代码


<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="material/xl_ico.png"
img.className="img"
img.height="15"
img.width="15"
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 .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="fafafa"}
div1.className="xiang"
div1.οnmοusemοve=function(){this.style.backgroundColor="6699cc"}
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("li_01",data,"s")
oo.create()
</script>