下拉框可选可输入html代码（两案列）

//案列一

//案列二

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<script>
/*
author:
qq:
*/
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 = "100";
        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);
}

</script>

<script language="javascript">
function init(){
SetAutoSelect("ss");
}
</script>
<body onload="init()">
    <select id="ss" >
    <Option>上海</Option>
    <Option>天津</Option>
    <Option>合肥</Option>
    <Option>广东</Option>
    <Option>杭州</Option>
    <Option>福建</Option>
    <Option>厦门</Option>
    <Option>辽宁</Option>
    <Option>黑龙江</Option>
    <Option>海南</Option>
    <Option>乌鲁木齐</Option>
<Option>哈尔滨</Option>
<Option>宁夏</Option>
<Option>西藏</Option>
<Option>河北</Option>
<Option>河南</Option>
<Option>辽宁</Option>
<Option>安徽</Option>
<Option>山西</Option>
<Option>江西</Option>
    </select>
    <br/>
    <br/>
    </body>
</html>

posted @ 2015-04-13 16:54 莫名字阅读(287) 评论(0) 收藏举报

刷新页面返回顶部

莫名字

下拉框可选可输入html代码（两案列）

公告