如何模拟select控件

<input  type=text id="sChannel" name="sChannel" size=16 readonly class="${param.style}"  οnclick="hitInput('ty','sChannel','sChannel_Div');"  style="text-align:left;margin:0px;border-right-width:0px"  >
// 设置此input没有右边框。

<img style="position:relative; left:0px; top:0px; z-index:3" border=0   src="/front/img/downmenu.gif" οnmοuseοver="src='/front/img/downmenu2.gif'" οnmοuseοut="src='/front/img/downmenu.gif'" οnclick="hitInput('ty','sChannel','sChannel_Div');" >
//设置此图片没有左边框。

<%@page language="java" contentType="text/html; charset=GBK"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="java.util.List,java.util.ArrayList,java.sql.Connection,java.sql.DriverManager,java.sql.ResultSet,java.sql.Statement"%>
<%@ page import="org.apache.commons.beanutils.RowSetDynaClass"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="org.apache.commons.beanutils.BasicDynaBean"%>
<%@ page import="cn.sintal.Constants"%>
<%@ page import="java.util.Map"%>
<%@ page import="cn.sintal.model.MCustomerType"%>
<%@ page import="org.apache.commons.lang.StringUtils"%>
var g_arr = new Array;
var type_arr = new Array;
var off = 0;
g=0;

<%
try{

  List list = new ArrayList();
  List secList = new ArrayList();
  
  
  list =(List)application.getAttribute(Constants.U2_Type_List);
  
  
  Map typeMap = (Map) application.getAttribute(Constants.U2_Sec_Type_Map);
  
  
  int typeOff=0;
  int beginOff=0;
  for (Iterator iter = list.iterator(); iter.hasNext();) {
   boolean hasSecList = false;
   MCustomerType obj = (MCustomerType)iter.next();
   Object secListObj = typeMap.get(obj.getId());
   if( secListObj!=null)
    secList = (List)secListObj;
   int secListBeginOffset = beginOff;
   if(secList!=null && secList.size()>0)
   {
    hasSecList = true;
    for(Iterator it = secList.iterator(); it.hasNext();){
      BasicDynaBean secObj = (BasicDynaBean)it.next();
      
    %> g_arr[<%=beginOff%>] = new Array("<%=obj.getId().longValue()%>","<%=obj.getTyName()%>","<%=secObj.get("id")%>","<%=secObj.get("name")%>"); <%   
      beginOff++;
    }//enf for
   }//end if
   %> 
    //是否有二级行业，第一个二级行业启示下标，最后一个二级行业的下标
    type_arr[<%=typeOff%>]=new Array("<%=hasSecList%>","<%=secListBeginOffset%>","<%=beginOff%>","<%=obj.getId().longValue()%>","<%=obj.getTyName()%>");
   <% 
   typeOff++;
  }//end for
  //rs.close();
  //st.close();
%>

function Point(iX, iY){
 this.x = iX;
 this.y = iY;
}

function fGetXY(aTag){
  var oTmp = aTag;
  var pt = new Point(0,0);
  do {
  
 //oTmp = oTmp.parentElement;//为了适应W3C标准
   pt.x += oTmp.offsetLeft;
   pt.y += oTmp.offsetTop;
   oTmp = oTmp.offsetParent;
    } while(oTmp.tagName!="BODY"&&oTmp.tagName!="HTML");
   //} while(oTmp.tagName!="DIV");
  return pt;
}

function hitTyInput(type){
 var hit = document.all.hit_ty.value;
 if( hit=='0'){
  hiddenAllDiv();
  
 }
 else{
  showConInfo(type)
  document.all.hit_ty.value ='0';
 }
}

function showConInfo(type){
 var Obj=new Object;
 var oObj=new Object;
 
 switch(type){
  case 'channel':
   Obj=document.all.sChannelDiv;
   oObj=document.all.sChannel;
  break;
  default:
   alert('脚本执行有误，请检查您的浏览器！');
 }
 
 hiddenAllDiv();
 
 var p=fGetXY(oObj);
 Obj.style.left=p.x;
 Obj.style.top=p.y+18;
 Obj.style.display='';
 window.event.cancelBubble = true;
}

function hiddenAllDiv(){
 document.all.sChannelDiv.style.display='none';
 document.all.hit_ty.value ='1';
}

var cutChannel='0';

function initChannel(c,tys_id){
 //document.all.sChannel.value=g_arr[0][1];
 document.all.sChannel.value='行业名称';
 cutChannel=0;
 
 if( tys_id==null || tys_id==''){
  for(i in g_arr){
   if( g_arr[i][0]==c ){
    document.all.sChannel.value=g_arr[i][1];
    document.all.channel_check_0.innerText="◇";
    eval('document.all.channel_check_'+i+'.innerText="◆"');
    //ZolSearchForm.obj.value=i;
    document.all.obj.value=i;
    cutChannel=i;
    break;
   }
  }
 }else{
  for(i in g_arr){
   if( g_arr[i][0]==c && g_arr[i][2]==tys_id ){
    document.all.sChannel.value=g_arr[i][1]+'-'+g_arr[i][3];
    document.all.channel_check_0.innerText="◇";
    eval('document.all.channel_check_'+i+'.innerText="◆"');
    //ZolSearchForm.obj.value=i;
    document.all.obj.value=i;
    cutChannel=i;
    break;
   }
  }
 }
}

function setChannel(k,v,tyid,sec_tyid){
 document.all.obj.value=k;

 eval('document.all.channel_check_'+cutChannel+'.innerText="◇"');
 eval('document.all.channel_check_'+k+'.innerText="◆"');
 cutChannel=k;

 document.all.sChannel.value=v;
 document.all.ty_id.value = tyid;
 document.all.tys_id.value= sec_tyid;

 for( i=0 ;i< type_arr.length; i++){
  var ceng = eval("document.all.PriceDiv"+i);
  if( ceng!=null)
   hiddenDiv(ceng);
 }
 
 hiddenAllDiv();
 window.event.cancelBubble = true;
}

function showDiv(Obj){
 Obj.style.display="";
}

function hiddenDiv(Obj){
 Obj.style.display="none";
}

 

 

//频道
var i=0;

var sChannelText=g_arr[0][0];

//传入一级行业的下标 0开始。
function listTypeSec(tyIndex){
 var s='';
 var sArr=0,eArr=0;
 var tmp;
 var k;
 var i;
 
 //在此处修改默认的二级行业每行个数，修改这一处即可。
 var default_colnum=3;
 
 var colnum = default_colnum;
 var width =255/default_colnum;
 
 sArr=parseInt( type_arr[ tyIndex ][1] );
 eArr=parseInt( type_arr[ tyIndex ][2] );
 if((eArr-sArr)<default_colnum)
 {
  colnum = eArr-sArr;
  width*=default_colnum-colnum+1;
 }
   
 s +='<table border=1 style="border-collapse : collapse;" borderColor="#eeeeee">';
 k=0;
 for (i= sArr; i<eArr ;i++){
    if(k%colnum==0) s +='<tr>';

    if(i=='0'){
     ico_channel='◆';
     sChannelText=g_arr[i][1];
    }else ico_channel='◇';
    s += '<td width=/''+width+'/' style="cursor:hand;" οnclick="setChannel(/''+i+'/',/''+g_arr[i][1]+'-'+g_arr[i][3]+'/','+g_arr[i][0]+','+g_arr[i][2]+');" onMouseOver="this.bgColor=/'#B5C7E6/';" onMouseOut="this.bgColor=/'/';"><span ID=channel_check_'+i+'>'+ico_channel+'</span> '+g_arr[i][3]+'</td>';
    
    if(k%colnum==colnum-1) s +='</tr>';
    k++;
 }
 s +='</table>';
 return s;
}

body ='';

 //document.createStyleSheet('http://search.zol.com.cn/search/search.css')
 body +='<STYLE>';
 body +='td{font-size:12px;}';
 body +='.stext{border:1px solid #B5C7E6;height:19px;cursor:default;margin:0px;}';
 body +='.SearchDownGif{margin:0px;}';
 body +='.unsel_item_over{cursor:default;text-align:center;background:#B5C7E6;border:1px solid #336699;}';
 body +='.unsel_item{cursor:default;text-align:center;background:#FFFFFF;border:1px solid #B5C7E6;}';
 body +='.sel_item{cursor:default;text-align:center;background:#336699;border:1px solid #336699;color:#FFFFFF;}';
 body +='.title_item{cursor:default;text-align:center;background:#000000;color:white;font-weight:bold;border:1px solid #B5C7E6;}';
 body +='.subcat_display_zone {overflow:visible;border:2px solid #336699;width:100px;background-color:#FFFFFF;position:absolute;}';
 body +='.dis_zone{overflow:visible;border:3px solid #336699;}';
 body +='</STYLE>'; 

 body +='<TABLE height=19 cellSpacing=0  border=0 style="border-collapse :collapse">';
 body +='<TBODY><TR><Td></Td>';
 body +='<TD height="19" align=center nowrap nowrap>';
 body +='  <TABLE height=19 cellpadding=0  border=0 style="border-collapse :collapse">';
 body +='   <input type=hidden name=obj value="0">';
 //body +='   tyid<input type=text name=tyid>';
 body +='   <input type=hidden name=hit_ty id=hit_ty>';
 body +='   <tr>';
 body +='    <td nowrap><input type=text size=18 readonly class="" name=sChannel id=sChannel style="text-align:left;" ID=sChannel  οnclick="hitTyInput(/'channel/');"></td><td width=15><img class=SearchDownGif border=0  src="/front/img/downmenu.gif" οnmοuseοver="src=/'/front/img/downmenu2.gif/'" οnmοuseοut="src=/'/front/img/downmenu.gif/'" id=searpic  οnclick="hitTyInput(/'channel/');"></td>';
 body +='   </tr>';
 body +='  </table>';

 //第一个选择框的内容 
// body +='<div id="sChannelDiv" style="position:absolute; border:1px solid #888888;background-color:#FFFFFF; z-index:1;display:none;" οnclick="showConInfo(/'channel/');">';
 body +='<div id="sChannelDiv" style="position:absolute; border:1px solid #888888; z-index:1;display:none;" class="sel" οnclick="showConInfo(/'channel/');">';
 body +='<table border=0 width=110 style="border-collapse : collapse;">';
 
 
 body +='<tr>';
 body +='<td width=16 align=center bgcolor="#EEEEEE"></td>';
 body +=' <td style="cursor:hand;" align="left" onMouseOver="this.bgColor=/'#B5C7E6/';" onMouseOut="this.bgColor=/'/';" οnclick="setChannel(/'0/',/'行业名称/',/'/',/'/');">';
 body +='   行业名称';
 body +=' </td>';
 body +='</tr>';
 
 var secTypeOffsetBegin=0;
 var secTypeOffsetEnd=0;
 
 for( jj=0 ; jj<type_arr.length; jj++ ){
 
  if( type_arr[jj][0]=="true")
  {
   body +='<tr onMouseOver="showDiv(document.all.PriceDiv'+jj+');" onMouseOut="hiddenDiv(document.all.PriceDiv'+jj+');">';
   body +=' <td width=16 bgcolor="#EEEEEE">&nbsp;</td>';
   body +=' <td style="cursor:hand" onMouseOver="this.bgColor=/'#B5C7E6/';" onMouseOut="this.bgColor=/'/';" οnclick="setChannel(/'0/',/''+type_arr[jj][4]+'/','+type_arr[jj][3]+',/'/');">'+type_arr[jj][4]+'</td>';
   body +=' <td align=center>';
  // body +='  <div ID=PriceDiv'+jj+' class=dis_zone style="position:absolute; background-color:#FFFFFF; z-index:1; display:none;">';
   body +='  <div ID=PriceDiv'+jj+' style="position:absolute; z-index:1; display:none;" class="sel">';
   body +='  <table border=0 width=255 style="border-collapse : collapse;">';
   body +='   <tr>';
   body +='   <td>';
   body += listTypeSec(jj);
   body +='   </td>';
   body +='   </tr>';
   body +='   </table>';
   body +='  </div>';
   body +='  <img src="/front/img/icon_triangle.gif" width=4 height=8 align=top></td>';
   body +='</tr>';
  }
  else{
   body +='<tr>';
   body +='<td width=16 align=center bgcolor="#EEEEEE"></td>';
   body +=' <td style="cursor:hand;" onMouseOver="this.bgColor=/'#B5C7E6/';" onMouseOut="this.bgColor=/'/';" οnclick="setChannel(/''+type_arr[jj][4]+'/',/''+type_arr[jj][4]+'/','+type_arr[jj][3]+',/'/');">';
   body +=type_arr[jj][4];
   body +=' </td>';
   body +='</tr>';
  }
  
 }
 
 body +='</table>';
 body +='</div>';
 
 
 body +='</TD>';
 body +='</TR>';
 body +='</TBODY></TABLE>';
 
 try{
  document.getElementById('search_bar_zone').innerHTML=body;
 }catch(e){
  document.write(body);
 }

 document.οnclick=hiddenAllDiv;
 var tyid='';
 if( document.all.ty_id.value !=''){
  tyid=document.all.ty_id.value;
 }
 var tys_id='';
 if( document.all.tys_id.value !=''){
  tys_id=document.all.tys_id.value;
 }
 initChannel(tyid,tys_id);

 
<%}catch(Exception e){
 System.err.print(e.getMessage());
 e.printStackTrace();

}%>