Javascript 模拟select
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank"
>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
</
a
>
">
< html xmlns ="<a href=" http://www.w3.org/1999/xhtml" target ="_blank" > http://www.w3.org/1999/xhtml </ a > " lang="zh-CN">
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< meta http-equiv ="Content-Language" content ="zh-CN" />
< title > 用javascript美化Select </ title >
< script type ="text/javascript" src ="select.js" ></ script >
< style type ="text/css" > ...
select{...}{width:200px;height:18px;}
</ style >
</ head >
< body >
< h1 > 用javascript simulate select </ h1 >
< form name ="f" onsubmit ="getResult();" >
< fieldset >
< legend > 用户注册 </ legend >
< div >
< label for ="username" > ID </ label >
< input type ="text" id ="username" name ="username" />
</ div >
< div >
< label for ="pwd" > Password </ label >
< input type ="password" name ="pwd" id ="pwd" />
</ div >
< div >
< label for ="province" > Country </ label >
< select id ="province" name ="province" >
< option value ="10" > can American American American American American </ option >
< option value ="11" > England </ option >
< option value ="12" > China </ option >
< option value ="13" > Norway </ option >
</ select >
</ div >
</ fieldset >
< input type ="submit" value ="提交" name ="btnSub" />
</ form >
< script type ="text/javascript" > ...
loadSelect(document.f.province);
</ script >
< p >
< a href ="<a href=" http://www.iwcn.net" target ="_blank" > http://www.iwcn.net </ a > ">作者博客 </ a >
</ p >
</ body >
</ html >
< html xmlns ="<a href=" http://www.w3.org/1999/xhtml" target ="_blank" > http://www.w3.org/1999/xhtml </ a > " lang="zh-CN">
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< meta http-equiv ="Content-Language" content ="zh-CN" />
< title > 用javascript美化Select </ title >
< script type ="text/javascript" src ="select.js" ></ script >
< style type ="text/css" > ...
select{...}{width:200px;height:18px;}
</ style >
</ head >
< body >
< h1 > 用javascript simulate select </ h1 >
< form name ="f" onsubmit ="getResult();" >
< fieldset >
< legend > 用户注册 </ legend >
< div >
< label for ="username" > ID </ label >
< input type ="text" id ="username" name ="username" />
</ div >
< div >
< label for ="pwd" > Password </ label >
< input type ="password" name ="pwd" id ="pwd" />
</ div >
< div >
< label for ="province" > Country </ label >
< select id ="province" name ="province" >
< option value ="10" > can American American American American American </ option >
< option value ="11" > England </ option >
< option value ="12" > China </ option >
< option value ="13" > Norway </ option >
</ select >
</ div >
</ fieldset >
< input type ="submit" value ="提交" name ="btnSub" />
</ form >
< script type ="text/javascript" > ...
loadSelect(document.f.province);
</ script >
< p >
< a href ="<a href=" http://www.iwcn.net" target ="_blank" > http://www.iwcn.net </ a > ">作者博客 </ a >
</ p >
</ body >
</ html >
javascript:
/**/
/************************************
* js模拟Select *
* Date:2007-11-15 *
************************************/
function lengthOfBytes(pStr)
... {//计算字符串以字节为单位的长度。
//ASCII码大于256的占两个字节.
var rLen=0;
if(pStr==null)return rLen;
var index=pStr.indexOf(" ");
while(index>=0)
...{
pStr=pStr.substr(0,index)+" "+pStr.substr(index+6);
index=pStr.indexOf(" ");
}
var aLen=pStr.length;
for(var i=0;i<aLen;i++)
...{
var ch=pStr.charCodeAt(i);
ch=parseInt(ch);
if(ch>256)
...{
rLen+=2;
}else rLen+=1;
}
return rLen;
}
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 loadSelect(obj) ... {
//第一步:取得Select所在的位置
var offset=Offset(obj);
//第二步:将真的select隐藏
obj.style.display="none";
//第三步:虚拟一个div出来代替select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolute";
iDiv.style.width=offset.width + "px";
iDiv.style.overflow="hidden";
iDiv.style.height=offset.height+ "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(icon_select.gif) no-repeat top right";
iDiv.style.border="1px solid #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//第四步:将select中默认的选项显示出来
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//第五步:模拟鼠标点击
iDiv.onmouseover=function()...{//鼠标移到
iDiv.style.background="url(icon_select_focus.gif) no-repeat top right";
}
iDiv.onmouseout=function()...{//鼠标移走
iDiv.style.background="url(icon_select.gif) no-repeat top right";
}
iDiv.onclick=function()...{//鼠标点击
if (document.getElementById("selectchild" + obj.name))...{
//判断是否创建过div
if (childCreate)...{
//判断当前的下拉是不是打开状态,如果是打开的就关闭掉。是关闭的就打开。
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
}else...{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate=true;
}
}else...{
//初始一个div放在上一个div下边,当options的替身。
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "absolute";
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;
var maxlen=0;
for (var i=0;i<obj.options.length;i++)...{
//将原始的select标签中的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 templen=lengthOfBytes(lLi.innerHTML);
if(templen>maxlen)
maxlen=templen;
}
maxlen=parseInt(maxlen*6.2);
if(maxlen<offset.width)
maxlen=offset.width;
cDiv.style.width=maxlen+"px";
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;
}
}
}
}
}
* js模拟Select *
* Date:2007-11-15 *
************************************/
function lengthOfBytes(pStr)
... {//计算字符串以字节为单位的长度。
//ASCII码大于256的占两个字节.
var rLen=0;
if(pStr==null)return rLen;
var index=pStr.indexOf(" ");
while(index>=0)
...{
pStr=pStr.substr(0,index)+" "+pStr.substr(index+6);
index=pStr.indexOf(" ");
}
var aLen=pStr.length;
for(var i=0;i<aLen;i++)
...{
var ch=pStr.charCodeAt(i);
ch=parseInt(ch);
if(ch>256)
...{
rLen+=2;
}else rLen+=1;
}
return rLen;
}
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 loadSelect(obj) ... {
//第一步:取得Select所在的位置
var offset=Offset(obj);
//第二步:将真的select隐藏
obj.style.display="none";
//第三步:虚拟一个div出来代替select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolute";
iDiv.style.width=offset.width + "px";
iDiv.style.overflow="hidden";
iDiv.style.height=offset.height+ "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(icon_select.gif) no-repeat top right";
iDiv.style.border="1px solid #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//第四步:将select中默认的选项显示出来
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//第五步:模拟鼠标点击
iDiv.onmouseover=function()...{//鼠标移到
iDiv.style.background="url(icon_select_focus.gif) no-repeat top right";
}
iDiv.onmouseout=function()...{//鼠标移走
iDiv.style.background="url(icon_select.gif) no-repeat top right";
}
iDiv.onclick=function()...{//鼠标点击
if (document.getElementById("selectchild" + obj.name))...{
//判断是否创建过div
if (childCreate)...{
//判断当前的下拉是不是打开状态,如果是打开的就关闭掉。是关闭的就打开。
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
}else...{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate=true;
}
}else...{
//初始一个div放在上一个div下边,当options的替身。
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "absolute";
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;
var maxlen=0;
for (var i=0;i<obj.options.length;i++)...{
//将原始的select标签中的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 templen=lengthOfBytes(lLi.innerHTML);
if(templen>maxlen)
maxlen=templen;
}
maxlen=parseInt(maxlen*6.2);
if(maxlen<offset.width)
maxlen=offset.width;
cDiv.style.width=maxlen+"px";
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;
}
}
}
}
}