使用js美化下拉列表样式

使用js美化下拉列表样式

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml "  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 " >
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.height = offset.height  +   " px " ;
  iDiv.style.top = offset.top  +   " px " ;
  iDiv.style.left = offset.left  +   " px " ;
  iDiv.style.background = " url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px " ;
  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(/articleimg/2007/04/4687/icon_select_focus.gif) no-repeat right 4px " ;
 }
 iDiv.onmouseout = function(){ // 鼠标移走
  iDiv.style.background = " url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px " ;
 }
 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.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 ++ ){
     // 将原始的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 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;
    }
   }
  }
 }
}
         </ script >
  < style type = " text/css " >
 select{width:200px;height:20px;}
</ style >
  </ head >
  < body >
   < h1 > 用javascript模拟select达到美化效果 </ h1 >
< form name = " f " >
  < fieldset >
   < legend > 用户注册 </ legend >
   < div >
    < label  for = " username " > 帐号 </ label >
    < input type = " text "  id = " username "  name = " username "   />
   </ div >
   < div >
    < label  for = " pwd " > 密码 </ label >
    < input type = " password "  name = " pwd "  id = " pwd "   />
   </ div >
   < div >
    < label  for = " province " > 省份 </ label >
    < select id = " province "  name = " province " >
     < option value = " 10 " > 江西 </ option >
     < option value = " 11 " > 福建 </ option >
     < option value = " 12 " > 广东 </ option >
     < option value = " 13 " > 浙江 </ option >
    </ select >
   </ div >
  </ fieldset >
  < input type = " submit "  value = " 提交 "  name = " btnSub "   />
</ form >
   < script type = " text/javascript " >
   loadSelect(document.f.province);
   </ script >
  < p >
   < a href = " http://www.iwcn.net " > 作者博客 </ a >
  </ p >
  </ body >
</ html >
< a href = " http://js.alixixi.com/ " > 欢迎访问阿里西西网页特效代码站，js.alixixi.com </ a >