怎样在DropDownList中显示评分图片

我想在下拉列表中显示类似图片
☆
☆☆
☆☆☆
☆☆☆☆
☆☆☆☆☆请高手赐教一下

解决方案 »

  1.   


                            <asp:DropDownList ID="DropDownList1" runat="server">
                                <asp:ListItem Value="1">☆ 
                                </asp:ListItem>
                                <asp:ListItem Value="2">☆ ☆ 
                                </asp:ListItem>
                                <asp:ListItem Value="3">☆ ☆ ☆ 
                                </asp:ListItem>
                                <asp:ListItem Value="4">☆ ☆ ☆ ☆ 
                                </asp:ListItem>
                                <asp:ListItem Value="5">☆ ☆ ☆ ☆ ☆ 
                                </asp:ListItem>
                            </asp:DropDownList>
      

  2.   

    http://www.ninedns.com/asp.net/200741910009.html
    下面是模仿的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>
      

  3.   

    WebDropDownList.aspx.csusing 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");
    }
    }
    #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
    }
    }