-
可选择也可填写的下拉框(用鼠标\键盘的上下键选择)
<!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="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>
-
相关阅读:
CentOS7 下更改源
/usr/bin/perl:bad interpreter:No such file or directory 的解决办法
Centos7 安装wget命令
Cannot find a valid baseurl for repo: base/7/x86_6 解决方法
python 启动新进程执行脚本
MongoDB数据类型
pymongo.errors.OperationFailure: Authentication failed.
python连接MongoDB（有密码有认证）
Mongodb 创建管理员帐号与普通帐号
python连接MongoDB(无密码无认证)
-
原文地址：https://www.cnblogs.com/jacklong/p/1041448.html
Copyright © 2020-2023
润新知