用div和span模拟select控件[1]

/*
文件说明
由于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;