现在位置:中国IDC吧>网页设计>JavaScript教程> 文章内容

用javascript实现select的美化

收藏发布 来源:互联网 作者:

lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" obj.name).getElementsByTagName("li");
for (var j=0;j<obj.options.length;j ){
//为li标签添加鼠标事件
liObj[j].onmouseover=function(){
this.style.background="gray";
this.style.color="white";
}
liObj[j].onmouseout=function(){
this.style.background="white";
this.style.color="black";
}
liObj[j].onclick=function(){
//做两件事情,一是将用户选择的保存到原始select标签中,要不做的再好看表单递交后也获取不到select的值了。
obj.options.length=0;
obj.options[0]=new Option(this.innerHTML,this.id);
//同时我们把下拉的关闭掉。
document.getElementById("selectchild" obj.name).style.display="none";
childCreate=false;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
最后这个比较复杂一点,再解释一下,我们在做这一步之前,select的样子已经出来了,下一步就是再加一个div去模仿select被点击之后出现的下拉选项了。我们可以讲select标签的options通过javascript提取出来,把它写成这样:

<div>
<ul>
<li>optionName</li>
<li>optionName</li>
<li>optionName</li>
</ul>
</div>
基本上就这样了。还有些缺陷,有时间大家可以一起补充!



上一页 1 2下一页
收藏此页到网摘/书签:
所有评论

评论列表

用户名: 新注册) 密码: 匿名评论