带图片的，多列的DropDownList的实现

<% @ Page language = " c# "  Codebehind = validateRequest = " false "  
 AutoEventWireup = " false "  Inherits = " eMeng.WebDropDownList "   %>
< HTML >
< HEAD >
< title > 模拟下拉列表框 </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< style  type ="text/css" >
BODY  {
FONT :  12px 宋体
}
TD  {
FONT :  12px 宋体
}
DIV  {
FONT :  12px 宋体
}
LABEL  {
PADDING-RIGHT :  0px ;  PADDING-LEFT :  4px ;  PADDING-BOTTOM :  0px ;  PADDING-TOP :  3px ;  HEIGHT :  19px
}
.link_box  {
CURSOR :  default ;  TEXT-ALIGN :  left
}
.link_head  {
BORDER-RIGHT :  2px inset ;  BORDER-TOP :  2px inset ;  BORDER-LEFT :  2px inset ;  WIDTH :  100% ;  
BORDER-BOTTOM :  2px inset ;  HEIGHT :  23px
}
.link_text  {
PADDING-LEFT :  2px ;  BACKGROUND :  #fff
}
.link_arrow0  {
BORDER-RIGHT :  2px outset ;  BORDER-TOP :  2px outset ;  BACKGROUND :  buttonface ;  
FONT :  14px marlett ;  BORDER-LEFT :  2px outset ;  WIDTH :  22px ;
 BORDER-BOTTOM :  2px outset ;  HEIGHT :  100% ;  TEXT-ALIGN :  center
}
.link_arrow1  {
BORDER-RIGHT :  buttonshadow 1px solid ;  PADDING-RIGHT :  0px ;  
BORDER-TOP :  buttonshadow 1px solid ;  PADDING-LEFT :  2px ;  
BACKGROUND :  buttonface ;  PADDING-BOTTOM :  0px ;  FONT :  14px marlett ;  
BORDER-LEFT :  buttonshadow 1px solid ;  WIDTH :  22px ;  PADDING-TOP :  2px ;  
BORDER-BOTTOM :  buttonshadow 1px solid ;  HEIGHT :  100% ;  TEXT-ALIGN :  center
}
.link_value  {
BORDER-RIGHT :  1px solid ;  BORDER-TOP :  1px solid ;  FILTER :  alpha(opacity:0) ;  
VISIBILITY :  hidden ;  OVERFLOW-X :  hidden ;  OVERFLOW :  auto ;  BORDER-LEFT :  1px solid ;  
BORDER-BOTTOM :  1px solid ;  POSITION :  absolute
}
.link_record0  {
BORDER-TOP :  #eee 1px solid ;  PADDING-LEFT :  2px ;  BACKGROUND :  #fff ;  
WIDTH :  100% ;  COLOR :  #000 ;  HEIGHT :  20px
}
.link_record1  {
BORDER-TOP :  #047 1px solid ;  PADDING-LEFT :  2px ;  BACKGROUND :  #058 ;  
WIDTH :  100% ;  COLOR :  #fe0 ;  HEIGHT :  20px
}

</ style >

< script  type ="text/javascript" >
var  dropShow = false
var  currentID
function  dropdown(el){
if (dropShow){
dropFadeOut()
} else {
currentID = el
el.style.visibility = " visible "
dropFadeIn()
}
}
function  dropFadeIn(){ // 选单淡入的效果
if (currentID.filters.alpha.opacity < 100 ){
currentID.filters.alpha.opacity += 20
fadeTimer = setTimeout( " dropFadeIn() " , 50 )
} else {
dropShow = true
clearTimeout(fadeTimer)
}
}
function  dropFadeOut(){ // 选单淡出的效果
if (currentID.filters.alpha.opacity > 0 ){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity -= 20
fadeTimer = setTimeout( " dropFadeOut() " , 50 )
} else {
dropShow = false
currentID.style.visibility = " hidden "
}
}
function  dropdownHide(){
if (dropShow){
dropFadeOut()
dropShow = false
}
}
function  hiLight(el){ // 高亮度显示指标位置
if (dropShow){
for (i = 0 ;i < el.parentElement.childNodes.length;i ++ ){
el.parentElement.childNodes(i).className = " link_record0 "
}
el.className = " link_record1 "
}
}
function  CheckMe(el){ // 替换显示内容
document.all.text1.innerText = el.innerText
}
document.onclick = dropdownHide
</ script >
</ HEAD >
< body  text ="#000000"  onload ="document.all.form1.reset()" >
< div  style ="padding:10px;border-bottom:2px solid red" > 模拟下拉框 </ div >
< form  id ="form1"  onsubmit ="alert(city.value)"  runat ="server" >
< table >
< tr >
< td >
< div  class ="link_box"  onselectstart ="return false"  style ="WIDTH: 100px" >
< div  class ="link_head"  onclick ="dropdown(value1)" >
< table  height ="100%"  cellSpacing ="0"  cellPadding ="0"  width ="100%"  border ="0" >
< tr >
     < td >
         < div  class ="link_text" >< nobr >< label  id ="text1" > 请选择？ </ label ></ nobr ></ div >
     </ td >
     < td  align ="right"  width ="22" >
         < div  onmouseup ="this.className='link_arrow0'"  class ="link_arrow0"  
        onmousedown ="this.className='link_arrow1'"  onmouseout ="this.className='link_arrow0'" > 6 </ div >
     </ td >
</ tr >
</ table >
</ div >
< div  class ="link_value"  id ="value1"  style ="WIDTH: 500px; HEIGHT: 300px" >
< asp:datagrid  id ="DataGrid1"  runat ="server"  AutoGenerateColumns ="False"  Font-Size ="12px"  Width ="100%"
ShowHeader ="False" >
< Columns >
< asp:BoundColumn  DataField ="Title"  SortExpression ="Title"  
    DataFormatString ="<img src='http://dotnet.aspx.cc/Images/meng.gif' align='absmiddle'> {0}" >
     </ asp:BoundColumn >
< asp:BoundColumn  DataField ="CreateDate"  SortExpression ="CreateDate"  
    HeaderText =""  DataFormatString ="{0:yyyy年MM月dd日}" ></ asp:BoundColumn >
</ Columns >
</ asp:datagrid >
< div  id ="mx" >
< div  class ="link_record0"  onmouseover ="hiLight(this)"  
    onclick ="CheckMe(this);document.all.form1.city.value=this.innerText" >< label > 北京市 </ label ></ div >
< div  class ="link_record0"  onmouseover ="hiLight(this)"  
    onclick ="CheckMe(this);document.all.form1.city.value=this.innerText" >< label > 上海市 </ label ></ div >
< div  class ="link_record0"  onmouseover ="hiLight(this)"
 onclick ="CheckMe(this);document.all.form1.city.value=this.innerText" >< label > 河南省 </ label ></ div >
< div  class ="link_record0"  onmouseover ="hiLight(this)"
 onclick ="CheckMe(this);document.all.form1.city.value=this.innerText" >< label > 深圳市 </ label ></ div >
< div  class ="link_record0"  onmouseover ="hiLight(this)"
 onclick ="CheckMe(this);document.all.form1.city.value=this.innerText" >< label > 大连市 </ label ></ div >
< div  class ="link_record0"  onmouseover ="hiLight(this)"
 onclick ="CheckMe(this);document.all.form1.city.value=this.innerText" >< label > 云南省 </ label ></ div >
</ div >
</ div >
</ div >
</ td >
< td >< input  type ="hidden"  value ="您尚未选择"  name ="city" >   < input  type ="submit"  value ="确定" >
</ td >
</ tr >
</ table >
</ form >
</ body >
</ HTML >