作者:孟宪会 出自:【孟宪会之精彩世界】 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 currentIDfunction dropdown(el) {if(dropShow){dropFadeOut()}else{currentID=elel.style.visibility="visible"dropFadeIn()}} function dropFadeIn() {//选单淡入的效果if(currentID.filters.alpha.opacity<100){currentID.filters.alpha.opacity+=20fadeTimer=setTimeout("dropFadeIn()",50)}else{dropShow=trueclearTimeout(fadeTimer)}} function dropFadeOut() {//选单淡出的效果if(currentID.filters.alpha.opacity>0){clearTimeout(fadeTimer)currentID.filters.alpha.opacity-=20fadeTimer=setTimeout("dropFadeOut()",50)}else{dropShow=falsecurrentID.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 codeoverride 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}}