SetAutoSelect("city");            
       
                    
        
         上海            
         
          天津            
          
           合肥            
           
            广东            
            
             杭州            
             
              福建            
              
               厦门            
               
                辽宁            
                
                 黑龙江            
                 
                  海南            
                  
                   乌鲁木齐            
                   
                    哈尔滨            
                    
                     宁夏            
                     
                      西藏            
                      
                       河北            
                       
                        河南            
                        
                         辽宁            
                         
                          安徽            
                          
                           山西            
                           
                            江西                
                           
                          
                         
                        
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

    使用方法:

  AutoSelect.js

/*author: qiangvqq:            35771991email/msn:qiangv@hotmail.comwww.itmancn.com*/function GetEvent(){    if(document.all)    {        return window.event;    }        func = GetEvent.caller;                while(func != null)    {        var arg0 = func.arguments[0];        if(arg0)        {            if((arg0.constructor == Event || arg0.constructor == MouseEvent)                || (typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation))            {                return arg0;            }        }            func=func.caller;    }      return null;}function getAbsoluteCoords (e) {    var t = e.offsetTop;     var l = e.offsetLeft;     var w = e.offsetWidth;     var h = e.offsetHeight;    while(e = e.offsetParent)     {      t += e.offsetTop;       l += e.offsetLeft;     };       return { top: t, left: l, width: w, height: h, bottom: t + h, right: l + w };}function OptionItem(strText, strValue, nOptionIndex){        OptionItem.prototype.Active = function(bActive)    {        if(bActive)        {            var item = document.getElementById(this.domInstanceId);            item.style.fontWeight = "bold";            item.style.backgroundColor = "#3366cc";            item = null;        }        else        {            // 若选中状态则返回            if(this.selected)            {                //return;            }            var item = document.getElementById(this.domInstanceId);            item.style.fontWeight = "normal";            item.style.backgroundColor = "#ffffff";            item = null;        }    };    OptionItem.prototype.ScrollIntoView = function(bTop)    {        document.getElementById(this.domInstanceId).scrollIntoView(bTop);    }    OptionItem.prototype.Initialize = function(strText, strValue, nOptionIndex)    {        this.parentInstance = null;        this.selected = false;        this.optionIndex = nOptionIndex;        this.text = strText;        this.value = strValue;        this.domInstanceId = OptionItem.prefixId + OptionItem.index;        OptionItem.index ++;        var divItem = document.createElement("DIV");        divItem.instance = this;        with(divItem)        {            // 设置ID            id = this.domInstanceId;            // 设置text            innerHTML = this.text;            // 设置鼠标样式            style.cursor = "default";            style.fontSize = "13px";        };        divItem.onmouseover = function()        {            // this.style.fontWeight = "bold";            this.instance.OnMouseOver();        };        divItem.onmouseout = function()        {            this.instance.OnMouseOut();            return false;        };        OptionItem.prototype.OnMouseOut = function()        {            this.Active(false);        };        divItem.test = function(evt)        {                    };                divItem.onmousedown = function()        {            this.instance.OnMouseDown();            return false;        };                OptionItem.prototype.OnMouseOver = function()        {            this.Active(true);        };                OptionItem.prototype.OnMouseDown = function()        {            this.parentInstance.OnItemClick(this.optionIndex);        };                OptionItem.prototype.Show = function()        {            var domInstance = document.getElementById(this.domInstanceId);            if(domInstance)            {                with(domInstance)                {                    style.display = "block";                    style.visibility = "visibile";                }            }        };                OptionItem.prototype.Hide = function()        {            var domInstance = document.getElementById(this.domInstanceId);            if(domInstance)            {                with(domInstance)                {                    style.display = "none";                    style.visibility = "hidden";                }            }        };                OptionItem.prototype.Test = function()        {            return true;        };                OptionItem.prototype.GetDomInstance = function()        {            var domInstance = document.getElementById(this.domInstanceId);            if(domInstance)            {                return domInstance;            }            else            {                return null;            }        };                OptionItem.prototype.SetParentInstance = function(parentInstance)        {            this.parentInstance = parentInstance;        };                // 初始化        document.body.insertBefore(divItem, null);    };        OptionItem.prototype.GetId = function()    {        return this.domInstanceId;    };    this.Initialize(strText, strValue, nOptionIndex);}// id 前缀OptionItem.prefixId = "optionItem";// 计数OptionItem.index = 0;// 列表类function OptionList(txtInstance){    OptionList.prototype.Initialize = function(txtInstance)    {        var txtDomInstance = document.getElementById(txtInstance.domInstanceId);        if(!txtDomInstance)        {            window.alert("错误！");            return false;        }        this.visible = false;        this.selectedIndex = -1;    // 没有选中条目        this.txtInstance = txtInstance;        var ret = getAbsoluteCoords(txtDomInstance);        this.left = ret.left;        this.top = ret.top + ret.height;        this.width = ret.width;        this.height = "200";        this.itemArray = new Array();        this.domInstanceId = OptionList.prefixId + OptionList.index;        OptionList.index ++;        var divList = document.createElement("DIV");        divList.instance = this;        with(divList)        {            id = this.domInstanceId;            style.position = "absolute";            style.top = this.top; + "px";            style.zIndex = "9999";            style.left = this.left + "px";            style.display = "none";            style.visibility = "hidden";            style.backgroundColor = "#ffffff";            style.border = "1px";            style.borderStyle = "solid";            style.overflowY = "auto";            style.width = this.width + "px";;            style.height = this.height + "px";;        }        divList.onfocus = function()        {            this.instance.Show();            document.getElementById("AutoSelect0").focus();        };                // 添加到body中        document.body.insertBefore(divList, null);    };        OptionList.prototype.SetLeft = function(nLeft)    {        this.left = nLeft;    };    OptionList.prototype.SetTop = function(nTop)    {        this.top = nTop;    };        OptionList.prototype.SetWidth = function(nWidth)    {        this.width = nWidth;    };        OptionList.prototype.SetHieght = function(nHeight)    {        this.height = nHeight;    };    // 添加Item    OptionList.prototype.AddItem = function(strText, strValue)    {        var divItem = new OptionItem(strText, strValue, this.itemArray.length);        divItem.SetParentInstance(this);        var divList = document.getElementById(this.domInstanceId);        divList.insertBefore(document.getElementById(divItem.GetId()), null);        this.itemArray.push(divItem);    };        // 显示    OptionList.prototype.Show = function()    {        this.visible = true;        var divList = document.getElementById(this.domInstanceId);        divList.style.display = "block";        divList.style.visibility = "visible";        divList.style.top = this.top + "px";        divList.style.left = this.left + "px";        divList.style.width = this.width + "px";        divList.style.height = this.height + "px";        this.itemArray[this.selectedIndex].Active(true);        this.itemArray[this.selectedIndex].ScrollIntoView(false);    };        OptionList.prototype.OnItemClick = function(optionIndex)    {        this.SetSelectedIndex(optionIndex);        this.txtInstance.OnItemClick(optionIndex);        this.Hide();        var txtDomInstance = document.getElementById(this.txtDomInstanceId);    };    // 隐藏    OptionList.prototype.Hide = function()    {        this.visible = false;        var divList = document.getElementById(this.domInstanceId);        divList.style.display = "none";        divList.style.visibility = "hidden";    };        OptionList.prototype.SetSelectedIndex = function(selectedIndex)    {        if(selectedIndex == this.selectedIndex)        {            return;        }        if(selectedIndex < 0)        {            selectedIndex = 0;        }        if(selectedIndex >= this.itemArray.length)        {            selectedIndex = this.itemArray.length - 1;        }        var txtDomInstance = document.getElementById(this.txtInstance.domInstanceId);        if(txtDomInstance)        {            txtDomInstance.value = this.itemArray[selectedIndex].text;            if(this.selectedIndex >= 0 && this.selectedIndex < this.itemArray.length)            {                this.itemArray[this.selectedIndex].selected = false;                this.itemArray[this.selectedIndex].Active(false);            }            this.selectedIndex = selectedIndex;            this.itemArray[this.selectedIndex].Active(true);            this.itemArray[this.selectedIndex].selected = true;            this.itemArray[this.selectedIndex].ScrollIntoView(false);        }    };        OptionList.prototype.GetSelectedIndex = function()    {        return this.selectedIndex;    };    OptionList.prototype.GetDomInstance = function()    {        return document.getElementById(this.domInstanceId);    };        this.Initialize(txtInstance);}// ID前缀OptionList.prefixId = "divOptionList";// 计数OptionList.index = 0;// 文本框类function AutoSelect(sltId){    AutoSelect.prototype.OnItemClick = function(optionIndex)    {        document.getElementById(this.domInstanceId).value = document.getElementById(this.sourceSlt).options[optionIndex].text;        document.getElementById(this.sourceSlt).selectedIndex = optionIndex;    };    AutoSelect.prototype.Initialize = function()    {        // 保存selectID        this.sourceSlt = sltId;        // 获取Select 并隐藏        var slt = document.getElementById(sltId);        slt.style.display = "none";        slt.style.visibility = "hidden";                                this.domInstanceId = AutoSelect.prefixId + AutoSelect.index;        // 计数加一        AutoSelect.index ++;                // 创建文本框        var txtAutoSelect = document.createElement("INPUT");        txtAutoSelect.instance = this;        with(txtAutoSelect)        {            type = "text";            id = this.domInstanceId;            // style.color = "#999999";            style.cursor = "default";            style.border = "1px";            style.borderColor = "#84a1bd";            style.borderStyle = "solid";            style.autocomplete = "off";            style.backgroundImage = "url('bg2.gif')";            style.backgroundRepeat = "no-repeat";            style.backgroundPosition = "right";            style.padding = "2px";        }        txtAutoSelect.onblur = function()        {            this.instance.OnBlur();        };            txtAutoSelect.onkeydown = function()        {            var e = GetEvent();            this.instance.OnKeyDown(e);            e = null;        };        AutoSelect.prototype.OnKeyDown = function(e)        {            switch(e.keyCode)            {                case 27:    // ESC                    this.optionList.Hide();                    break;                case 40:    // 向下键                    if(!this.optionList.visible)                    {                        this.optionList.Show();                    }                    else                    {                        this.optionList.SetSelectedIndex(this.optionList.GetSelectedIndex() + 1);                    }                    break;                case 38:    // 向上键                    if(this.optionList.visible)                    {                        this.optionList.SetSelectedIndex(this.optionList.GetSelectedIndex() - 1);                    }                    break;                case 13:    // 回车                    if(this.optionList.visible)                    {                        this.optionList.Hide();                    }                default:                    // window.alert(e.keyCode);                    break;            }        };        txtAutoSelect.onmousedown = function()        {            this.focus();            this.instance.OnMouseDown();            return false;        };        AutoSelect.prototype.OnMouseDown = function()        {            if(!this.optionList.visible)            {                this.optionList.Show();            }            else            {                this.optionList.Hide();            }        };                txtAutoSelect.onmousewheel = function()        {            var e = GetEvent();            if(e == null)            {                return false;            }            this.instance.OnMouseWheel(e);            e = null;        };        AutoSelect.prototype.OnMouseWheel = function(e)        {            if(e.wheelDelta <= 0 || e.detail > 0)             {                 this.optionList.SetSelectedIndex(this.optionList.GetSelectedIndex() + 1);            }             else             {                 this.optionList.SetSelectedIndex(this.optionList.GetSelectedIndex() - 1);            }         };        if(document.body.addEventListener)        {            txtAutoSelect.addEventListener("DOMMouseScroll", txtAutoSelect.onmousewheel, false);        }        // 将文本框插入到select的位置        var parentNode = slt.parentNode;        if(parentNode)        {            parentNode.insertBefore(txtAutoSelect, slt);        }        else        {            //         }                txtAutoSelect = null;                // 创建OptionList对象        this.optionList = new OptionList(this);        // 添加optionitem        var itemCount = slt.options.length;        for(var i = 0; i < itemCount; i ++)        {            this.optionList.AddItem(slt.options[i].text, slt.options[i].value);        }        // 设置默认选中项        this.optionList.SetSelectedIndex(slt.selectedIndex);    };        AutoSelect.prototype.OnBlur = function()    {        this.optionList.Hide();    };        this.Initialize();}AutoSelect.prefixId = "AutoSelect";AutoSelect.index = 0;function SetAutoSelect(sltId){    var slt = document.getElementById(sltId);    if(!slt || slt.nodeName != "SELECT")    {        window.alert("无效的对象！");        return;    }        slt.instance = new AutoSelect(sltId);}