开发学院 WEB开发 Jsp 带图片的，多列的DropDownList的实现阅读

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

　2008-01-05 10:51:49　来源：WEB开发网　　　

核心提示：下面是模拟的DropDownList的效果，支持图片，带图片的，多列的DropDownList的实现，多列，换行等

　　下面是模拟的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" >
　　<div style="padding:10px;border-bottom:2px solid red">模拟下拉框</div>
　　<form id="form1" runat="server">
　　<table>
　　<tr>
　　<td>
　　<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
　　<div class="link_head" >
　　<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 class="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://www.cncms.com/uploadImages/2007-5-2/2007521075860821.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"
　　 ><label>北京市</label></div>
　　<div class="link_record0"
　　 ><label>上海市</label></div>
　　<div class="link_record0"
　　 ><label>河南省</label></div>
　　<div class="link_record0"
　　 ><label>深圳市</label></div>
　　<div class="link_record0"
　　 ><label>大连市</label></div>
　　<div class="link_record0"
　　 ><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()).Con