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

WebDropDownList.aspx

<% @ Page language = " c# "  Codebehind = " WebDropDownList.aspx.cs " validateRequest = " false "  
 AutoEventWireup = " false "  Inherits = " eMeng.WebDropDownList "   %>
< HTML >
< HEAD >
< title > 模拟下拉列表框 </ title >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
< style > 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 >
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 >

WebDropDownList.aspx.cs

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  System.Data.OleDb;

namespace  eMeng
... {
/**//// <summary>
/// ShowList 的摘要说明。
/// </summary>
public class WebDropDownList : System.Web.UI.Page
...{
protected System.Web.UI.WebControls.DataGrid DataGrid1;

private void Page_Load(object sender, System.EventArgs e)
...{   
DataGrid1.Columns[0].ItemStyle.Width = Unit.Pixel(400);
DataGrid1.Columns[1].ItemStyle.Width = Unit.Pixel(100);
Data_Bind();
}

public void Data_Bind()
...{
Response.CacheControl = "no-cache";
Response.Expires = -1;
try
...{
string strSQL = "SELECT id,objectGuid,Title,CreateDate,HitCount FROM Document ORDER BY id DESC";
string cnString = (new Connection()).ConnectionString;
OleDbConnection cn = new OleDbConnection(cnString);
cn.Open();
OleDbCommand cmd = new OleDbCommand(strSQL, cn);
DataGrid1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
DataGrid1.DataBind();
cn.Close();
cn.Dispose();
cn = null;
cmd.Dispose();
cmd = null;
}
catch(OleDbException myOleDbException)
...{
Response.Write("错误：" + myOleDbException.Message + ":" + myOleDbException.HelpLink);
Response.End();
}
}
private void DataGrid1_ItemDataBound(object sender,System.Web.UI.WebControls.DataGridItemEventArgs e)
...{

if( e.Item.ItemIndex != -1 )
...{
e.Item.Attributes.Add("onmouseover", "this.bgColor='#C1D2EE'");
e.Item.Attributes.Add("onclick", 
"document.all.text1.innerText=this.cells[0].innerText;document.all.form1.city.value=this.cells[0].innerText;");
if (e.Item.ItemIndex % 2 == 0 )
...{
 e.Item.Attributes.Add("bgcolor", "#FFFFFF");
 e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').getAttribute('singleValue')");
}
else
...{
 e.Item.Attributes.Add("bgcolor", "oldlace");
 e.Item.Attributes.Add("onmouseout", "this.bgColor=document.getElementById('DataGrid1').getAttribute('oldValue')");
}
}
else
...{
DataGrid1.Attributes.Add("oldValue", "oldlace");
DataGrid1.Attributes.Add("singleValue", "#FFFFFF");
}
}
Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
...{
//
// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/**//// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
...{    
this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}