用div和span模拟select控件

/*
文件说明
由于select 不会被挡住 在做菜单的时候会影响效果 本程序通过div模拟select 定义的时候参考下例
<span  id="CUL" value="" onchange="alert(this.options[this.selectedIndex][2])" style="display:inline;width:130"  height=20 text=""
 options="[
 ['平台进口报关单','43','aaaa'],
 ['平台出口报关单','44','bbbb'],
 ['平台进口报关清单','45','ccccc'],
 ['平台出口报关清单','46','ddddd'],
 ['h883同步报关单','']
 ]"></span>
定义时的有用属性列表
style.width 宽度 如果定义了宽度 转化后的select将采用这个宽度 不定义宽度90
height  高度 如果不定义select将根据options的数量自动增长
options  select内容 转化后将变成数组 可以通过 <obj>.options[<下标一>][<下标二>]访问，如<obj>.options[3][2]  
onChange 或者 onchange 选择后执行这段代码 如果没有就不执行
转化后新增属性
value 选择后的value
text 选择后显示出来的内容
selectedIndex 第几项被选中了 从0开始 默认为0

其它
转化请调用函数ChangeToSelect 例如 ChangeToSelect(CUL);
在样式表里清定义如下样式
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:130%;cursor:default;width:100%;}
.defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;}
.defaultSelect2 { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:#cccccc;width:15px;text-align:center;cursor:default;font-size:8px;}

开发者 李世尧 对 蓝色理性 http://www.blueidea.com/tech/web/2003/1327.asp 内容进行修改得到该文件
*/
function ChangeToSelect(obj){
 var selectDiv = document.createElement("table");
 obj.selectDiv=selectDiv;
 obj.options=eval(obj.options);
 selectDiv.style.width=obj.style.width;
 var selectDivTR = selectDiv.insertRow();
 obj.selectDivTR=selectDivTR;
 var defaultValueTD = selectDivTR.insertCell();
 obj.defaultValueTD=defaultValueTD;
 var arrow = selectDivTR.insertCell();
 arrow.style.color='black';
 //arrow.width="17px";
 obj.arrow=arrow;
 
 with(obj.selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
 if (parseInt(obj.style.width+'')-parseInt(obj.style.width+'')==0)
 with(obj.defaultValueTD)innerText = obj.options[0][0],className="defaultSelect2";
 else
 with(obj.defaultValueTD)innerText = obj.options[0][0],className="defaultSelect";
 obj.value=obj.options[0][1];
 obj.text=obj.options[0][0];
 obj.selectedIndex=0;
 with(obj.arrow)innerText=6,className="arrow";
 obj.appendChild(selectDiv);
 //外层Div
 obj.optionDiv = document.createElement("div");
 obj.optionDiv.flag="SELECT";
 //设置下拉菜单选项的坐标和宽度
 with(obj.optionDiv.style) {
  var select = obj.selectDiv;
  var xy = getSelectPosition(select);
  pixelLeft = xy[0];
  pixelTop = xy[1]+select.offsetHeight;
  width = obj.selectDiv.offsetWidth;
  obj.optionDiv.className = "optionDiv";
  backgroundColor="white";
  if(obj.height!=null)height=obj.height;
  overflowX="hidden";
  overflowY="auto";
 }
 //下拉菜单内容
 obj.Options = new Array();
 
 for (var i=0;i<obj.options.length;i++) {
  obj.Options[i] = obj.optionDiv.appendChild(document.createElement("div"));
 }
 for (i=0;i<obj.Options.length;i++) {
  obj.Options[i].innerText = obj.options[i][0];
  obj.Options[i].Farther=obj;
  obj.Options[i].index=i;
 }
 obj.appendChild(obj.optionDiv);
 
 /*事件*/
 //禁止选择文本
 obj.selectDiv.onselectstart = function() {return false;}
 obj.optionDiv.onselectstart = function() {return false;}
 //下拉菜单的箭头
 obj.arrow.onmousedown = function() {
  this.setCapture();
  this.style.borderStyle="inset";
 }
 obj.arrow.onmouseup = function() {
  this.style.borderStyle="outset";
  this.releaseCapture();
 }
 obj.arrow.onclick = function() {
  event.cancelBubble = true;
  obj.optionDiv.style.visibility = obj.optionDiv.style.visibility=="visible"?"hidden":"visible";
 }
 document.onclick = function() {
  var divs=document.all.tags("DIV");
  for (var i=0;i<divs.length;i++){
   if (divs[i].flag=="SELECT") divs[i].style.visibility="hidden";
  }
 }
 obj.defaultValueTD.onclick = function() {
  event.cancelBubble = true;
  obj.optionDiv.style.visibility = obj.optionDiv.style.visibility=="visible"?"hidden":"visible";
 }
 //移动Option时的动态效果
 for (i=0;i<obj.Options.length;i++) {
  obj.Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
  obj.Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
  obj.Options[i].attachEvent("onmouseup",selectedText);
 }
 function moveWithOptions(bg,color) {
  with(event.srcElement) {
   style.backgroundColor = bg;
   style.color = color;
  }
 }
}
function getSelectPosition(obj) {
 var objLeft = obj.offsetLeft;
 var objTop = obj.offsetTop;
 var objParent = obj.offsetParent;
 while (objParent.tagName != "BODY") {
  objLeft += objParent.offsetLeft;
  objTop += objParent.offsetTop;
  objParent = objParent.offsetParent;
 }
 return([objLeft,objTop]);
}
function selectedText() {
 var sel=event.srcElement.Farther;
 sel.selectedIndex=event.srcElement.index;
 sel.value=sel.options[sel.selectedIndex][1];
 sel.text=sel.options[sel.selectedIndex][0];
 with(event.srcElement) {
  sel.defaultValueTD.innerText = innerText;
 }
 sel.optionDiv.style.visibility="hidden";
 //with(sel.defaultValueTD.style)background="highlight",color="white";
 var t="";
 if (sel.onChange!=null)
 t+=sel.onChange;
 if (sel.onchange!=null)
 t+=sel.onchange;

 if (t!=''){
  var cmd=(t).replace(/this/gi,"sel");
  //document.execScrip(cmd,"javascript");
  
  eval(cmd);
 }
 
}// JavaScript Document

本文地址：http://com.8s8s.com/it/it31228.htm