可选择也可填写的下拉框(用鼠标\键盘的上下键选择)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <script language='javascript'>    
    function getstring()
    {
        return "<input id=\"key\" type=text  ondblclick=\"showMenu()\" onkeydown=\"selectElement()\" value=\"请用鼠标双击击这里\"/>";
    }
    function getKeyCode()
    {
        //alert(window.event.keyCode);
        //alert(document.getElementById("key").value);
        document.getElementById("key").value+=window.event.keyCode;
    }
    //==========================================================================================================
    function mouseOver(e)
    {
        e.style.background="#0080ff";
    }
    function mouseOut(e)
    {
        e.style.background="#ff8000";
    }
    function mouseClick(e)
    {
        document.getElementById("key").value=e.innerText;
        e.parentNode.style.display="none";
    }
    var num=0;
    var divObj;
    function showMenu()
    {
        var arr=getOjbPosition();
        var left=arr[0];
        var top=arr[1];
        //alert(left+" : "+top);
        var obj=document.getElementById("key");
        
        var div=document.getElementById("Menu");
        div.style.position="absolute";
        div.style.background="#ff8000";
        div.style.zIndex=2000; 
        div.style.left=left;
        div.style.top=top;
        div.style.width=obj.offsetWidth;
        div.style.display="";
        divObj=div;
        num=div.childNodes.length;
    }
    function getDiv()
    {
        var div=document.getElementById("Menu");
        var num=div.childNodes.length;
        for(var i=0;i<num;i++)
        {
            alert(div.childNodes[i].outerHTML);
            div.childNodes[i].style.background="#0080ff";
        }
        
    }
    function getOjbPosition()
    {
        var arr=new Array();
        var obj=document.getElementById("key");
        var x=obj.offsetLeft;
        var y=obj.offsetTop+obj.offsetHeight;
        while(obj.offsetParent)
        {
            obj=obj.offsetParent;
            x+=obj.offsetLeft;
            y+=obj.offsetTop;
        }
        arr[0]=x;
        arr[1]=y;
        return arr;
    }
    var k=0;
    var tag=0;
    function selectElement()
    {    
        
        var key=window.event.keyCode
        if(divObj.style.display=="")
        {
            if(key==40)
            {
                //divObj.childNodes[k].style.background="#0080ff";    
                if(tag==0)
                {}
                else
                {                    
                    k++;
                    if(k>=num)
                    {                
                        k=0;                
                    }    
                }        
            }
            if(key==38)
            {
                //divObj.childNodes[k].style.background="#0080ff";
                k--;
                if(k<0)
                {
                    k=num-1;                
                }
            }
            for(var i=0;i<num;i++)
            {    
                if(i==k)
                {                
                    divObj.childNodes[i].style.background="#0080ff";
                    document.getElementById("key").value=divObj.childNodes[i].innerText;
                }
                else
                {
                    divObj.childNodes[i].style.background="";
                    //document.getElementById("key").value=divObj.childNodes[i].innerText;
                }
            }        
        }
        tag=1;
        if(key==13)
        {
            
            if(divObj.style.display=="")
            {
                divObj.style.display="none";
            }
            else
            {
                divObj.style.display="";
            }
        }    
    
    }
    //******************************************* 测试数组 ***********************************
    var arr="A,B,C,D,E,F,H";
    var t=0;
    function getArray()
    {
    
        var str=document.getElementById("AVG").value;
        var alist=arr.split(',');
        
        for(var i=0;i<alist.length;i++)
        {            
            if(alist[i]==str)
            {
                t=1;
            }
        }
        
        if(t==1)
        {
            arr="";
            for(var i=0;i<alist.length;i++)
            {            
                if(alist[i]!=str)
                {
                    arr+=alist[i]+",";
                }
            }
            arr=arr.substring(0,arr.length-1);
            t=0;
        }
        else
        {
            arr=arr+","+str;
        }
        alert(arr);
        
    }
    </script>
</head>

<body>
当一个字符数组含有某一个元素时删除它，如果没有该元素，则增加到数组中去<br>
<input id="AVG" type=text value="输入字符" />
<input type=button onclick="getArray()"  value="测试数组"/><p><p><p><p><p>
<script language='javascript'>document.write(getstring())</script>
双击显示下拉列表后可以用键盘的上下键选择,也可以用回车键显示下拉列表
<div id="Menu" style="background:#008080;display:none;cursor:default">
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span style="width:100%">AAA</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>bbb</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>ccc</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>ddd</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>eee</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>fff</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>AAA</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>bbb</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>ccc</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>ddd</span></div>
<div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="mouseClick(this)"><span>eee</span></div>
</div>
</body>
</html>
posted @   龍的傳人  阅读(808)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
点击右上角即可分享
微信分享提示