重写 DropDownList !

重写 DropwnDownList 服务器端代码:

    [DefaultProperty("ID")]
    [ToolboxData(@"<{0}:DfSelect runat=""server""></{0}:DfSelect>")]
    public partial class DfSelect : DropDownList, INamingContainer
    {
        protected override void Render(HtmlTextWriter writer)
        {
            string strSelValue = this.SelectedValue ;
            string strSelText = this.SelectedItem.Text;
            string strAttrs = "";


            foreach (string key in this.Attributes.Keys)
            {
                strAttrs +=" " + key + @"=""" + this.Attributes[key] + @""" ";
            }

            string strSelCon = string.Format(@"<span value=""{0}"" {2} onclick=""javascript: _btnMySelClick(this);"" onmouseover=""javascript: _btnMySelOver(this) ;"" onmouseout=""javascript: _btnMySelOut(this);"">
{1}<label style=""font-family: Wingdings 3;font-size:11px; visibility: hidden"">q</label></span>",
                strSelValue, strSelText , strAttrs);

            writer.Write(@"<div id=""" + this.ClientID + @""" class=""DfSelect"" >" + strSelCon );
            writer.Write(@"<span style=""display:none"" class=""DfSelect_Options"" ondeactivate=""javascript: _OptDeactivate(this);"" onblur=""javascript: _OptDeactivate(this);"" >");
            foreach (ListItem item in this.Items)
            {
                writer.Write(@"<label style=""width:100%;position: absolute;"" onmouseover=""javascript: _OptOver(this);"" value=""" + item.Value + @""" >" + item.Text + @"</label><br/>");
            }
            writer.Write("</span>");
            //this.Style["display"] = "none";
            //base.Render(writer);
            writer.Write("</div>");
        }
    }

相应的客户端脚本如下:

function _GetPreviousSibling(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var _theCon ;
    if ( obj.previousSibling == null ) return null ;
    if ( obj.previousSibling.nodeType == 1 )  _theCon = obj.previousSibling ; 
    else _theCon= obj.previousSibling.previousSibling ;
    
    return _theCon ;
}
function _GetNextSibling(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var _theCon ;
    if ( obj.nextSibling == null ) return null ;
    if ( obj.nextSibling.nodeType == 1 )  _theCon = obj.nextSibling ; 
    else _theCon= obj.nextSibling.nextSibling ;
    return _theCon ;
}
function _btnMySelClick(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var _theConStyle = _GetNextSibling(obj) ; 
    if ( _theConStyle.style.display == "none" ) 
    {
        _theConStyle.style.display = "inline"; 
        _theConStyle.style.cursor = "default";
        _theConStyle.style.position = "absolute";
        var rect = obj.getBoundingClientRect() ;
        _theConStyle.style.top = rect.bottom - obj.offsetTop;
        _theConStyle.style.left = rect.left -obj.offsetLeft ;
//        _theConStyle.style.top = rect.bottom - rect.top ;
//        _theConStyle.style.left = 0 ;
        _theConStyle.style.width = obj.getBoundingClientRect().right   -  rect.left ; 
        
        
        _theConStyle.focus();
    }
    else _theConStyle.style.display = "none";
    
}

function _OptDeactivate(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var _theConStyle = obj ; 
    _theConStyle.style.display = "none";

    _btnMySelOut( _GetPreviousSibling ( obj ) ) ;
}

function _btnMySelOver(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var btnFlag = obj.getElementsByTagName("label")[0] ;
    btnFlag.style.visibility = "visible" ;
    obj.style.cursor = "default" ;
    obj.style.borderWidth = "1px" ;
    obj.style.borderColor="#D7D7D7";
    obj.style.borderStyle="solid";
}
function _btnMySelOut(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var btnFlag = obj.getElementsByTagName("label")[0] ;
    var _theConStyle = _GetNextSibling(obj) ; 
    if ( _theConStyle == null || _theConStyle.style.display == "none" ) 
    {
        btnFlag.style.visibility = "hidden" ;
        obj.style.borderWidth = "0px" ;
    }
}


function _OptOver(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    
    if ( obj.parentNode.OverNode != null )
    {
        obj.parentNode.OverNode.style.backgroundColor = "" ;
    }
    obj.style.backgroundColor="red";
    obj.parentNode.OverNode = obj ;
    obj.parentNode.focus();
    
}

用另一种思路:把原来的Select暂时 隐藏起来.

    [DefaultProperty("ID")]
    [ToolboxData(@"<{0}:DfSelect runat=""server""></{0}:DfSelect>")]
    public partial class DfSelect : DropDownList, INamingContainer
    {
        protected override void Render(HtmlTextWriter writer)
        {
            string strSelValue = this.SelectedValue ;
            string strSelText = this.SelectedItem.Text;
            string strAttrs = "";

            writer.Write(@"<script language=""javascript"" type=""text/javascript"">
function _GetPreviousSibling(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var _theCon ;
    if ( obj.previousSibling == null ) return null ;
    if ( obj.previousSibling.nodeType == 1 )  _theCon = obj.previousSibling ; 
    else _theCon= obj.previousSibling.previousSibling ;
    
    return _theCon ;
}
function _GetNextSibling(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var _theCon ;
    if ( obj.nextSibling == null ) return null ;
    if ( obj.nextSibling.nodeType == 1 )  _theCon = obj.nextSibling ; 
    else _theCon= obj.nextSibling.nextSibling ;
    return _theCon ;
}


function _btnMySelOver(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var sel = _GetNextSibling( obj) ;
    sel.style.display = ""inline"" ;
    sel.style.position = ""absolute"";
    var rect = obj.getBoundingClientRect() ;
    sel.style.top = rect.top - obj.offsetTop;
    sel.style.left = rect.left -obj.offsetLeft ;
}

function _btnMySelChange(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    var viw = _GetPreviousSibling(obj) ;
    viw.style.display = ""inline"" ;
    viw.value = obj.value ;
    viw.innerText = obj.options[ obj.selectedIndex].text;
    obj.style.display = ""none"" ;
}

function _btnMySelOut(obj)
{
    if (obj == null || obj == undefined ) obj = event.srcElement ;
    obj.style.display = ""none"" ;
}</script>
") ;

            foreach (string key in this.Attributes.Keys)
            {
                strAttrs +=" " + key + @"=""" + this.Attributes[key] + @""" ";
            }

            string strSelCon = string.Format(@"<span value=""{0}"" {2}  onmouseover=""javascript: _btnMySelOver(this) ;"">
{1}<label style=""font-family: Wingdings 3;font-size:11px; visibility: hidden"">q</label></span>",
                strSelValue, strSelText , strAttrs);

            writer.Write(@"<div id=""" + this.ClientID + @""" class=""DfSelect"">" + strSelCon );
            this.Style["display"] = "none";
            this.Attributes["onchange"] = @"javascript: _btnMySelChange(this);";
            this.Attributes["onmouseout"] = @"javascript: _btnMySelOut(this);"; 
            base.Render(writer);
            writer.Write("</div>");
        }
    }