JS 实现下拉菜单的方法
来源:互联网 发布:日本爱知教育大学 编辑:程序博客网 时间:2024/05/01 07:04
本人在做一个.net网站时,后台的文章要添加多个关键字,这些关键字要能在后台设定,以传统的方法,是用select 下拉菜单实现,这个方式虽然实现很方便,但管理起来感觉就不是很好了,因为关键字很多,所以我就想用JS来实现在文本框下的下拉菜单。实现代码如下:
'add(this)'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">...
<!--
.tr {...}{
height: 150px;
width: 80px;
border: 1px solid #ededed;
position:absolute;
z-index: 10;
display:none;
background-color:#ffffff;
}
-->
</style>
</head>
<body>
<div class="tr" id="aa" onclick="aaa()">
<div onmouseover=this.style.backgroundColor='#F6F6F6' onmouseout="this.style.backgroundColor='#ffffff'" style="cursor:hand;" onclick='add(this)'>测试一下</div>
<div onmouseover=this.style.backgroundColor='#F6F6F6' onmouseout="this.style.backgroundColor='#ffffff'" style="cursor:hand;" onclick='add(this)' >测试二下</div>
<div onmouseover=this.style.backgroundColor='#F6F6F6' onmouseout="this.style.backgroundColor='#ffffff'" style="cursor:hand;" onclick='add(this)'>测试三下</div>
<div onmouseover=this.style.backgroundColor='#F6F6F6' onmouseout="this.style.backgroundColor='#ffffff'" style="cursor:hand;" onclick='add(this)' >测试四下</div>
</div>
<input type="text" name="textfield" id="dd" onmouseover="look('dd')" />
<input type="text" name="textfield" id="dd1" onmouseover="look('dd1')" />
<script type="text/javascript">...
function look(obj)
...{
a1 = obj
var bb = document.getElementById("aa");
var cc = document.getElementById(obj);
bb.style.top = cc.offsetTop + 40 ;
bb.style.left = cc.offsetLeft + 40 ;
bb.style.display = 'block';
}
function add(obj)
...{
document.getElementById(a1).value= obj.innerText ;
}
function aaa()
...{
document.getElementById("aa").style.display = "none";
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">...
<!--
.tr {...}{
height: 150px;
width: 80px;
border: 1px solid #ededed;
position:absolute;
z-index: 10;
display:none;
background-color:#ffffff;
}
-->
</style>
</head>
<body>
<div class="tr" id="aa" onclick="aaa()">
<div onmouseover=this.style.backgroundColor='#F6F6F6' onmouseout="this.style.backgroundColor='#ffffff'" style="cursor:hand;" onclick='add(this)'>测试一下</div>
<div onmouseover=this.style.backgroundColor='#F6F6F6' onmouseout="this.style.backgroundColor='#ffffff'" style="cursor:hand;" onclick='add(this)' >测试二下</div>
<div onmouseover=this.style.backgroundColor='#F6F6F6' onmouseout="this.style.backgroundColor='#ffffff'" style="cursor:hand;" onclick='add(this)'>测试三下</div>
<div onmouseover=this.style.backgroundColor='#F6F6F6' onmouseout="this.style.backgroundColor='#ffffff'" style="cursor:hand;" onclick='add(this)' >测试四下</div>
</div>
<input type="text" name="textfield" id="dd" onmouseover="look('dd')" />
<input type="text" name="textfield" id="dd1" onmouseover="look('dd1')" />
<script type="text/javascript">...
function look(obj)
...{
a1 = obj
var bb = document.getElementById("aa");
var cc = document.getElementById(obj);
bb.style.top = cc.offsetTop + 40 ;
bb.style.left = cc.offsetLeft + 40 ;
bb.style.display = 'block';
}
function add(obj)
...{
document.getElementById(a1).value= obj.innerText ;
}
function aaa()
...{
document.getElementById("aa").style.display = "none";
}
</script>
</body>
</html>
- JS 实现下拉菜单的方法
- js下拉菜单的实现
- 下拉菜单的实现,纯CSS实现下拉菜单 与 使用JS实现下拉菜单
- js实现下拉菜单
- Js实现下拉菜单
- js实现下拉菜单
- js实现下拉菜单
- js实现下拉菜单
- js实现收缩的下拉菜单
- js实现简单的下拉菜单
- js实现下拉菜单的源代码
- php-js-关联下拉菜单的实现
- js实现简单的导航下拉菜单
- 实现下拉菜单显示隐藏的方法。
- JS多维关联下拉菜单实现方法(转)
- js实现省份下拉菜单
- 下拉菜单的实现
- 下拉菜单的实现
- SQLServer技术(28)
- SQLServer技术(30)
- Window 中窗口的层次关系以及窗口的属性 - 陈绍英 - CSDNBlog
- SQLServer技术(31)
- SQLServer技术(32)
- JS 实现下拉菜单的方法
- 突然有很多多感慨
- SQLServer技术(34)
- SQLServer技术(35)
- phpmyadmin与mysql更改密码出错解决方法
- SQLServer技术(36)
- 时间差计算问题
- 把SQL部署到远程数据库服务器中
- 2005ReportingServices的一个bug及其解决方法