JavaScript 图标美化的下拉框 - 王朝网络宽屏版

服务器弱智，请自行将代码中包含全角ｓｅｌｅｃｔ的部分替换为半角字符。

程序代码

var childCreate=false;

function Offset(e)

//取标签的绝对位置

{

var t = e.offsetTop;

var l = e.offsetLeft;

var w = e.offsetWidth;

var h = e.offsetHeight-2;

while(e=e.offsetParent)

{

t+=e.offsetTop;

l+=e.offsetLeft;

}

return {

top : t,

left : l,

width : w,

height : h

}

function loadｓｅｌｅｃｔ(obj){

//第一步：取得ｓｅｌｅｃｔ所在的位置

var offset=Offset(obj);

//第二步：将真的ｓｅｌｅｃｔ隐藏

obj.style.display="none";

//第三步：虚拟一个div出来代替ｓｅｌｅｃｔ

var iDiv = document.createElement("div");

iDiv.id="ｓｅｌｅｃｔof" + obj.name;

iDiv.style.position = "absolute";

iDiv.style.width=offset.width + "px";

iDiv.style.height=offset.height + "px";

iDiv.style.top=offset.top + "px";

iDiv.style.left=offset.left + "px";

iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";

iDiv.style.border="1px solid #ccc";

iDiv.style.fontSize="12px";

iDiv.style.lineHeight=offset.height + "px";

iDiv.style.textIndent="4px";

document.body.appendChild(iDiv);

//第四步：将ｓｅｌｅｃｔ中默认的选项显示出来

var tValue=obj.options[obj.ｓｅｌｅｃｔedIndex].innerHTML;

iDiv.innerHTML=tValue;

//第五步：模拟鼠标点击

iDiv.onmouseover=function(){//鼠标移到

iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";

}

iDiv.onmouseout=function(){//鼠标移走

iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";

}

iDiv.onclick=function(){//鼠标点击

if (document.getElementById("ｓｅｌｅｃｔchild" + obj.name)){

//判断是否创建过div

if (childCreate){

//判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。

document.getElementById("ｓｅｌｅｃｔchild" + obj.name).style.display="none";

childCreate=false;

}else{

document.getElementById("ｓｅｌｅｃｔchild" + obj.name).style.display="";

childCreate=true;

}

}else{

//初始一个div放在上一个div下边，当options的替身。

var cDiv = document.createElement("div");

cDiv.id="ｓｅｌｅｃｔchild" + obj.name;

cDiv.style.position = "absolute";

cDiv.style.width=offset.width + "px";

cDiv.style.height=obj.options.length *20 + "px";

cDiv.style.top=(offset.top+offset.height+2) + "px";

cDiv.style.left=offset.left + "px";

cDiv.style.background="#f7f7f7";

cDiv.style.border="1px solid silver";

var uUl = document.createElement("ul");

uUl.id="uUlchild" + obj.name;

uUl.style.listStyle="none";

uUl.style.margin="0";

uUl.style.padding="0";

uUl.style.fontSize="12px";

cDiv.appendChild(uUl);

document.body.appendChild(cDiv);

childCreate=true;

for (var i=0;i<obj.options.length;i++){

//将原始的ｓｅｌｅｃｔ标签中的options添加到li中

var lLi=document.createElement("li");

lLi.id=obj.options[i].value;

lLi.style.textIndent="4px";

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(){

//做两件事情，一是将用户选择的保存到原始ｓｅｌｅｃｔ标签中，要不做的再好看表单递交后也获取不到ｓｅｌｅｃｔ的值了。

obj.options.length=0;

obj.options[0]=new Option(this.innerHTML,this.id);

//同时我们把下拉的关闭掉。

document.getElementById("ｓｅｌｅｃｔchild" + obj.name).style.display="none";

childCreate=false;

iDiv.innerHTML=this.innerHTML;

}

</script>

ｓｅｌｅｃｔ{width:200px;height:20px;}

</style>

</head>

<body>

<h1>用javascript模拟ｓｅｌｅｃｔ达到美化效果</h1>

<ｓｅｌｅｃｔ id="province" name="province">

</ｓｅｌｅｃｔ>

</form>

loadｓｅｌｅｃｔ(document.f.province);

</script>